Altering CSS for nav bar images to accommodate IE - css

Question

My horizontal nav bar is populated with images for the links that are coming from one image that includes all the sub-images; each nav item image is identified by the pixel location within the larger image. This works perfectly fine in Firefox and Safari, but in IE, all of the images are misplaced too low within the nav bar (can only barely see the tops of the words). Two questions:
How do I fix this in the css so it is back-compatible with the more recent versions (and current versions) of IE
Do I need a separate IE stylesheet?
Here's the css (truncated for just a few of the links):
ul#navbar {
width: 750px;
height: 22px;
margin: 0px;
padding: 0px;
text-indent: -9999px;
border: none;
}
ul#navbar li {
float: left;
height: 22px;
margin: 0px;
padding: 0px;
list-style-type: none;
border: none;
/*position:absolute;*/
}
ul#navbar li a {
display: block;
height: 22px;
border: none;
}
.home {
left: 0px;
width: 78px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.classes {
/*left: 78px; */
width: 92px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -100px 0px;
}
.training {
left: 170px;
width: 89px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -200px 0px;
}

Answer 1

I've used *.html for IE 6
/** For IE6 /
*html #related-products
{
width: 300px;
overflow:visible;
}
*html #related-products ul
{
position:relative;
left: -65px;
}
*html #related-products li
{
border: none;
}
/ End of IE6 hack **/
Otherwise there's the IE conditional comments.
http://www.quirksmode.org/css/condcom.html
As far as separate style sheet you can create one have your Server Side language detect the browser and if Internet Explorer make sure your IE one gets added, otherwise you can add these into an existing CSS file. I've done both.

Answer 2

Well ... I think you don't want to hear this, but: Never, ever rely on exact pixel positions in HTML/CSS (imagemaps superimposed on one image are the only exception).
HTML is simply not made for pixel-exact design. From your description, there's not even a possibility for graceful fallback on browsers that don't support one of the technologies you seem to rely on. And what about screens that are too narrow to show your complete navbar (e.g. mobile devices)? In the best case, you'll get a multi-line navbar, but from your description, it would be broken since the position would be wrong...