List item link problems

[dcp3450]

IE (of course) is giving me so me issues. They seem pretty simple but I can’t quite get around them:

I have list items for my main menu:

Code:

• Home




• Current Students




• Prospective Students




• Faculty & Staff




• Visitors

my css sets the li to inline-block and gives defines the id’s with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.

When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.

Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.

Any ideas?

[dcp3450]

I redid the html:
<ul>
<li><a href="#" class="home">Home</a></li>
….
</ul>

css:
#menuContainer a.home
{
background: transparent url(images/mainMenu.png) no-repeat 0 0;
display: block;
height: 37px;
width: 73px;
}

text-indent: -9999px;

the display and actions are correct in Chrome and firefox. IE still will not allow the image to be a link

[Author]

Posts