Grow your CSS skills. Land your dream job.

floated ul shows up weird in IE

  • # June 25, 2008 at 3:50 pm

    I’m sure I completely missed something in my CSS, but I’ve been working on a new design for my oldest website, and decided that in lieu of creating static link names like I did in my other project I’ve been working on, or no navigation bar like I did with my newest site, boredwrestlingfan.com, I thought I’d try my hand at CSS coding the main links in a navbar at the top of the page, in the header image. While it works fine in Firefox and Opera, in IE it comes up weird – the first link is below where it should be, the next one is higher, and it almost creates a stair-like effect leading to the last link, which is in the position it should be. You can check it out at http://testingground.fropac.com/s5pconcept and see for yourself. Obviously I’m just starting this one, as I haven’t done up the link colors or anything. I’m also eventually going to need ideas about getting IE 6 and below to render the transparency properly in my PNG files because I have no clue how to work around that. Anyways, here’s the code as it is now:

    Code:
    ul#nav {
    height: 207px;
    width: 696px;
    background: url(images/header.png) no-repeat;
    margin: -20px auto;
    position: relative;
    }
    ul#nav li a{
    display: block;
    width: 112px;
    float: right;
    margin-top: 150px;
    margin-left: 5px;
    color: #777777;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    }
    ul#nav li a:hover, ul#nav li a:active{
    color: #fff600;
    }

    Anybody have any idea what I’m doing wrong to cause the stair effect in IE, or at least an idea of a workaround? Again, it only comes up wrong in IE, other browsers I’ve tested work fine.

    # June 25, 2008 at 4:04 pm

    It’s step-down your experiencing.

    Chris has a good article on it:

    http://css-tricks.com/prevent-menu-stepdown/

    # June 25, 2008 at 7:38 pm

    that absolutely worked. I knew I should’ve looked around the site before posting here, but I was just too out of it at the time. Thanks for the help!

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

You must be logged in to reply to this topic.

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