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!

[Catman]

I've been wrestling with this issue myself and have as yet to come up with a good solution. But it seems to be related to input being viewed as an inline element.

You might also want to check your font size -- if you don't have one declared (even if it's the default setting), that might be causing the problem.

[bryndyment]

It's the border attribute that's affecting it. If I set border-width to '1', it uses the sizes I've specified. Alas, 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.

[pardicity3]

If by "that nice default border" you mean the slightly beveled effect, it can be acheived through this css:

.button {
border: 2px outset #999;
}

Or atleast I think that is the right code--you'll need to adjust the size and color of course. This is a slightly odd problem though as I haven't heard about much trouble with the IE5/mac box model. Are you sure you have a doctype declaration (http://www.codingforums.com/showthread.php?s=&threadid=18346)? This may solve your problems (if they are related to the box model) by making most browsers render the model the same way.

[Catman]

I'm fairly certain it's just another one of those Mac IE 5 quirks that you have to figure out how to live with.

When it comes to cross-browser compatibility, I've finally settled on the philosophy, if it's functional and doesn't look like crap, it's good enough.

[bradyj]

That's ok -- use Mac users only make up 1% of the computer population anyway -- I'd imagine we can live with this fate.

But, as a designer on a Mac, I have the exact same problem... except when I use my OS X version (I believe 5.1.6?) which fixed most of these errors all together.