IE position of centred text on A tag

I'm using this CSS to align a line of text (the link) with the background image so the text is exactly vertically centred, it works fine in Safari but in IE the text is 1 pixel further down. The class is applied directly to the A tag.

.menu{
height:20px;
padding-right:10px;
padding-top:4px;

font-size:12px;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
color:#333;

background-image:url(/admin/icon.gif);
background-position:right;
background-repeat:no-repeat;
display:inline-block;
}

2012-04-03 20:04
by Guesser

You can try to reset the style for the browsers.. here is a link that might help http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Reset List: http://www.cssreset.com/

there is also hacks for each version of IE to make slight changes.. http://mathiasbynens.be/notes/safe-css-hacks

and if for older version check out ChromeFrame :)

2012-04-03 20:09
by Tony

I want to avoid hacks if possibl - Guesser 2012-04-03 20:23

The CSS reset is not a hack.. it is pretty standard. If you are trying to achieve cross-browser comparability.... hacks is all you have when IE is involved. Even the default controls from Visual Studio don't always look right in IE.. If the CSS reset doesn't work.. mucho luck : - Tony 2012-04-03 20:25

What do you mean by CSS reset - Guesser 2012-04-03 22:09

Check the link I gave you above. It is a method of resetting all the browser specific stylings. Each browser has its own spacing and such for different html controls and by doing a reset (which is just including a css file before your css file that resets all properties) it will allow you to start fresh with a clean slate for each browser. This will allow you to not worry (as much) about different spacing of each browser. I bet a the reset I linked too will help - Tony 2012-04-04 20:25