Menu problem - help please

[Avss]

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;
}

[Alan]

This is I'm afraid quite a common problem. Different versions of IE interpret the CSS code differently, its not just across the browsers.

Firstly you should get away from defining the size of your font in pt or px, better to use percentage or ems instead. Similarly for the padding etc.