CSS sizing... Mac/IE wants to make my button bigger

[bryndyment]

On Mac/IE, why is this button showing up 66 pixels wide, and 25 pixels high? It's showing up correctly (56 x 20) on Windows, both IE and Netscape.

<div style="height: 20px; width: 56px;">
<input style="height: 20px; width: 56px;" type=submit value="OK">
</div>

Help!

[Birdman]

Some browsers don't allow certain properties of form elements to be styled. An alternative it to use:

<input type="image" src="path" />

...and create an image of the exact button you want.

[bryndyment]

Thanks, I don't think it's that, though. It's letting me size this item. It's always increasing the size that I specify, though. It seems to be adding 10 pixels to any width I pass in.

[Nick_W]

>any width

Really? - How about at the extreme?

I'm no gfx guy but isn't this maybe a dpi thing?

Nick

[Birdman]

Could it be the text within the button making it stretch?

Experiment by explicitly defining:

font-size
border
padding

Something to toy with, anyway.

[Nick_W]

Damn! - I glanced at the code but didn't really take it in!

Birdmans quite right of course. Well, more likely right than I am ;) - I thought it was a graphical button!

Nick

[bryndyment]

It's the border attribute that's affecting it. Investigating further...

[pageoneresults]

If you are mixing inline styles with an external style sheet, I've been finding some bugs throughout different browsers. Try moving the style into the external sheet and make a class for the input button.

P.S. Actually had my first site that passed the Mac browser test without any tweaking just last week. All css and not one thing had to be adjusted, Woohoo!

[bryndyment]

Problem is, as soon as I mess with border-width, I lose the nice styled border. And I don't think there's a border-style setting for "that nice default border".

Seems like the only way to handle this, if I want both the "native" button and the exact same button size across browsers/platforms, is with a browser conditional. Sigh.

[pageoneresults]

You have ten attributes that you could apply to the border-style.

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

I believe it is the outset one that will give you that button appearance you are looking for. I typically don't mess around much with button styles, most are used to seeing the default gray. I will of course css the font so it doesn't look out of whack with the rest of the content.

[DCElliott]

While "outset" works as a line¦button style, I don't like the way it is interpreted cross-browser, especially when you get to >2px thickness. Also, the highlight & shadow values are different between browsers making it difficult to ensure everything adheres to the palette scheme one has chosen.

Another factor affecting button size is line-height. We often define font sizes without realizing that we are also affecting line height which can be interpreted differently. If I am styling button text I always specify both font-size and line-height explicitly.

DE