Grow your CSS skills. Land your dream job.

Puzzled by Screencast No.2

  • # June 24, 2008 at 12:01 pm

    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]

    # June 24, 2008 at 12:38 pm

    Try display: inline on the li elements

    http://css-tricks.com/prevent-menu-stepdown/

    Another way is to set the line-height to zero, which is preferable if you can get that to work because it’s generally bad form to put a block element inside an inline element.

    # June 24, 2008 at 8:34 pm

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".