# \<ul\> horizontal list not working in IE

**URL:** <https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483>\
**Category:** web dev\
**Created:** [June 16, 2008, 3:41pm UTC](https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483 "2008-06-16T15:41:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Awesome\_O\_4000](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@Awesome\_O\_4000](https://forum.kirupa.com/u/Awesome_O_4000)\
**Post date:** [June 16, 2008, 3:41pm UTC](https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483/1 "2008-06-16T15:41:55Z")

</div>

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

```auto

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

```

```auto

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

![](http://img81.imageshack.us/img81/2462/picture4gs8.png)

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 16, 2008, 4:07pm UTC](https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483/2 "2008-06-16T16:07:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Awesome\_O\_4000](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@Awesome\_O\_4000](https://forum.kirupa.com/u/Awesome_O_4000)\
**Post date:** [June 16, 2008, 4:12pm UTC](https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483/3 "2008-06-16T16:12:53Z")

</div>

Nevermind. Just fixed it.

---

<div class="post-metadata">

**Author:** ![Awesome\_O\_4000](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@Awesome\_O\_4000](https://forum.kirupa.com/u/Awesome_O_4000)\
**Post date:** [June 16, 2008, 4:13pm UTC](https://forum.kirupa.com/t/ul-horizontal-list-not-working-in-ie/263483/4 "2008-06-16T16:13:55Z")

</div>

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.