<ul> horizontal list not working in IE

programming web dev
1

I’ve got a few buttons that should be displayed in a horizontal line. Works fine in FF, but in IE, only the leftmost button is where it should be. Each subsequent button, left to right, is down a few pixels (so the menu looks like a bunch of stairs - see image below).


<ul class="nav">
    <li><a href="#" class="homebtn"><span></span></a></li>
    <li><a href="#" class="aboutbtn"><span></span></a></li>
    <li><a href="#" class="workbtn"><span></span></a></li>
</ul>



.nav {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 240px;
    height: 63px;
}
.nav span {
    display: none;
}
.nav a {
    display: block;
    outline: none;
}
.nav .homebtn {
    width: 78px;
    height: 63px;
    background: url(images/home.gif) no-repeat;
    float: left;
    margin-right: 3px;
}

.nav .aboutbtn {
    width: 78px;
    height: 63px;
    background: url(images/about.gif) no-repeat;
    float: left;
    margin-right: 3px;
}
.nav .workbtn {
    width: 78px;
    height: 63px;
    background: url(images/work.gif) no-repeat;
    float: right;
}

Here’s what it looks like right now in IE.

2

you need to float the <li>

currently you are applying float:left to the anchor tags in each list item

so do something like this:

.nav li {
display: block;
float: left;
}

get rid of both your float left and float right from your classes (if everything is floated left, it will appear in a straight line, no need to do left-left-right, how you currently have it)

  • Also, you don’t need to redefine your width and height for each class if they are all going to be the same:

.nav ul li a {
width: 78px;
height: 63px;
}

this will apply it to all anchor tags

3

Nevermind. Just fixed it.

4

lol, I didn’t even see your post. Thanks!
Yeah, I need to get into the habit of condensing my CSS. Thanks for the tips.