Forums

westnileBK

Hi,

This is my very first post. I am also a newbie to CSS. My horizontal nav looks fine in FF but in IE it has a break. Can anyone help me out?

Here's CSS code:

div#page-wrap {
width: 881px;
background: black;
margin: 0 auto;
}

ul#nav {
height: 207px;
background: url('images/header.jpg') no-repeat top;
list-style: none;
padding-left: 400px;
}

ul#nav li a {
display: inline;
width: 80px;
text-align: center;
color: white;
float: left;
margin-top: 180px;
text-decoration: none;
}

ul#nav li a:hover, ul#nav li a:active {
color: #66ff00;
}

Here's HTML code:

<div id="page-wrap">

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

cssgirl

Hey there!

Someone just asked this a few days ago AND I had just experienced it when coding a template yesterday so it's right fresh in my brain ;)

See: viewtopic.php?f=2&t=851 (has link to Chris's CSS-Tricks entry on it as well).

Basically, you need to add either display:inline or float:left to your actual <li>.

I prefer to float:left;

chriscoyier

Add:

ul#nav li {
  display: inline;
}

Ranger

that's the answer I've been looking for! thank you, thank you!

treehouse : what would you like to learn today?

Forums

[Solved] stepdown bug in IE