Menu problem - help please

Hi all,

Hope someone can help, this is driving me nuts!
This menu works fine, but the buttons are larger (higher) in Firefox and Opera, than in IE. I need the buttons to look the same height as in IE. I have fiddled with the height setting, and also tried adding padding-top, but can't get the required result.

Any suggestions anyone please? Code and css below:

Many thanks, db
-

The HTML:

<div class="buttonscontainer">
<div class="buttons">
<a href="index.htm">Home</a>
<a href="page1.htm>blah1</a>
<a href="page2.htm">blah2</a>
<a href="page3.htm">blah</a>
<a href="page4.htm">blah4</a>
<a href="page5.htm">blah5</a>
<a href="page6.htm">blah6</a>
</div>
</div>



The CSS:

.buttons a {
color : #202020;
height : 28px;
background-color : #9FA3AA;
padding : 2px;
padding-left : 6px;
padding-top : 6px;
display : block;
border-bottom : 1px solid #ffffff;
border-left : 0px solid #f2f6fa;
font : 14px Arial, Geneva, sans-serif;
font-weight : normal;
text-decoration : none;
text-align : left;
vertical-align: middle;

}
.buttons a:hover {
color : #FFFFFF;
font : 14px Arial, Geneva, sans-serif;
font-weight : normal;
text-decoration : none;
background-color : #7CB0E0;
border-left : 0px solid #ffffff;
vertical-align: middle;

}
.buttons a:visited {
color : #202020;
font : 14px Arial, Geneva, sans-serif;
font-weight : normal;
text-decoration : none;
background-color : #9FA3AA;
border-left : 0px solid #ffffff;
vertical-align: middle;

}
.buttons a:visited:hover {
color : #FFFFFF;
font : 14px Arial, Geneva, sans-serif;
font-weight : normal;
text-decoration : none;
background-color : #7CB0E0;
border-left : 0px solid #ffffff;
vertical-align: middle;
}

 

I would guess that it's got something to do with this:

padding : 2px;
padding-left : 6px;
padding-top : 6px;

Code (markup):

You are declaring a 2px padding for top, right, bottom and left, before revising the padding for left and top to 6px.

Get rid of padding: 2px; and set padding individually for each dimension (top, right, bottom and left). Or get rid of the individual padding and only leave padding: 2px;.

Maybe that'll fix it. I'm not sure.

 

Lemme guess, you threw IE into Quirks mode?

 

Yo thanks Masterful. The 4 separate delarations did the trick, after removing the height dec. completely. This is the problem when you copy/paste code without fully understanding it.
I am now so happy I may go outside for a few minutes!

Thanks again, db~