Grow your CSS skills. Land your dream job.

Unordered list problem in IE 7

  • # January 23, 2009 at 9:34 pm

    Alright, so I have an UL with 8 list items in it that are displayed inline. Each item is a 50×50 image. Everything is fine and dandy in Firefox, but in IE7 the last list item jumps down a line and is underneath the first list item.

    Here is the CSS for the UL:

    Code:
    ul#biographies { background: transparent;
    position: relative;
    border-bottom: 3px solid #2a2a2a;
    padding-bottom: 10px;
    top: 30px;
    width: 100%;
    list-style: none;
    height: 60px; }

    ul#biographies li { display: inline;
    padding: 0 5px 0 8.5px;
    float: left; }

    ul#biographies li a { display: block; }

    ul#biographies li a img { border: thin solid #2a2a2a;
    padding: 2px 2px 2px 2px;}

    ul#biographies li a img:hover { border: thin solid #ffffff; }

    It’s probably something dumb, but I don’t know what’s making the last item jump to another line only in IE. :?

    # January 23, 2009 at 9:38 pm

    Lol..

    Ok, I think I figured it out just now…

    In IE7 the borders of the images are thicker than the ones in Firefox. When I changed the right padding from 8.5 (I don’t know why I had this as a decimal in the first place) to 7, the images lined up correctly in IE and just moved a little to the left in Firefox.

    Wow..

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