Grow your CSS skills. Land your dream job.

List item link problems

  • # February 6, 2010 at 9:26 am

    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:

    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?

    # February 6, 2010 at 1:31 pm

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".