Altering CSS for nav bar images to accomodate IE

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

Thanks!

Answer 1

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...