The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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,, 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 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:

    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:

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed