Puzzled by Screencast No.2

[nickcallaghan]

I’m in the process of of working my way thourgh the videos in the screencast section. I’m a bit puzzled with screencast 2. The page displays perfectly in Firefox 3 however in IE7 the navigation menu looks to like it’s stepping down after each <li>?

I’ve attatched the code an a screenshot below. Any help would be much appreciated :-) Cheers, Nick

html:

<div id="page-wrap">
<ul id="nav">
<li><a href="#">Press</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Comtact</a></li>

</ul>

css:

ul#nav {
background:url(images/header-bg.jpg) no-repeat;
height:236px;
list-style:none;
padding-left:125px;

}

ul#nav li a {
display:block;
width:113px;
float:left;
margin-top:165px;
color:#FFFFFF;
font-weight:bold;
}

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

[img]http://i101.photobucket.com/albums/m52/nickc01/webcast2.jpg[/img]

[nickcallaghan]

Hey Chris,

Cheers, for your reply. display:inline on the <li> worked a treat! Congratulations on your awesome website I’ve found it invaluble while learning CSS. The screencasts are brilliant, Keep up the good work.

Thanks,

Nick

[Author]

Posts