Customizing a button, displays differently in IE and FF

[FrOzeN]

I'm trying to get this button to look the same in both IE and FF.

[img]http://img208.imageshack.us/img208/965/buttonszx8.jpg[/img]

[b]My CSS[/b]:
[code].button {
    background-color: #eee;
    border: #000 1px solid;
    color: #000;
    font: 11px Verdana, Tahoma, Arial, Sans-Serif;
}[/code]

Example page: http://www.clananthrax.net/example.html

1. I want the padding to be the same (or relatively similar).
2. I don't want IE to add the 2px black border, I just want it to stay as a 1px border.

Any suggests with my css to get them more the same?

[notDeadYet]

Firefox and IE6 handle widths, padding and cell-spacing differently.

IE includes the cellpadding/spacing in the width attributes.
width: 400px;
padding: 20px; // makes a box 400px wide.

Firefox treats width, padding/spacing seperately, so they would need to add up to the total width:
width: 360px;
padding: 20px; // also makes a box 440px wide

To write that in your css file,

td {
width: 360px;
padding: 20px;
}

* html td {
width: 400px;
padding: 20px;
}

Adding the * html  makes that code only visible to IE brower, so it overwrites the first style that Firefox will read.

So, you may need to set width/padding for your link cells just to make sure they are the same.

[FrOzeN]

Thanks, I'll look into tweaking it with that. :)

[Daniel0]

You could have something like this, but it would be kind of annoying to maintain multiple stylesheets: [code]<link rel='stylesheet' href='global.css' title='Global stylesheet' />
<?php
if(check_for_ie_here)
{
?>
<link rel='stylesheet' href='global.css' title='IE stuff' />
<?php
}
else {
?>
<link rel='stylesheet' href='global.css' title='FF stuff' />
<?php
}
?>[/code]