The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

New to CSS and having problems

  • # November 14, 2008 at 12:58 pm

    Hello All,

    You might be hearing from me quite a bit because i’m in the process of putting together my first, mostly css site. I am attempting a basic horizontal sprite menu. I have been using Chris’ video tutorial to help me with this:

    The problem I am having is that when I preview the page in both firefox and safari, the menu just simply doesn’t show up. If I get rid of the float:left tag, it shows up vertically but when I try to make it horizontal, it disappears.

    Here is a link to what it is now:

    And this is the image of what I would like it to eventually look like.

    (image no longer available)

    Any pointers (with anything at all!!) would be greatly appreciated.

    Below is my html code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style2.css" />
    <style type="text/css">
    <div id="page-wrap">
        <ul id="nav">
            <li class="collective"><a href="#">Collective</a></li>
            <li class="stuff"><a href="#">Our Stuff</a></li>
            <li class="about"><a href="#">About</a></li>
            <li class="special"><a href="#">Sophie</a></li>
    <div id="footer">

    And this is my CSS code:

    @charset "UTF-8";
    /* CSS Document */
    * { margin: 0; padding: 0; }
    html {overflow-y: scroll; }
    body {font: Georgia, "Times New Roman", Times, serif;
        background: url(images/body-bg.png) repeat-x top #000028; }
    ul { list-style: none inside; }
    p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a {outline: none; }
    a img {border: none; }
    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}
    #page-wrap {
            width: 1000px;
            margin: 0 auto; }
    ul#nav {
            ul#nav li {
                        display: inline;
                        ul#nav li a {
                                    display: block;
                                    height: 62px;
                                    text-indent: -9999px;
                                    ul#nav li.collective a {
                                                        background:url(images/nav_collective.png) no-repeat bottom center;
                                    ul#nav li.stuff a {
                                                        background:url(images/nav_stuff.png) no-repeat bottom center;
                                    ul#nav li.about a {
                                                        background:url(images/nav_about.png) no-repeat bottom center;
                                    ul#nav li.special a {
                                                        background:url(images/nav_special.png) no-repeat bottom center;
                                    ul#nav li a:hover {
                                                        background-position: center center;

    Thank you so much!

    # November 14, 2008 at 2:48 pm

    I cleaned up the code quite a bit with some help from others, but it still doesnt seem to be working…

    # November 14, 2008 at 4:40 pm

    This reply has been reported for inappropriate content.

    Change your nav li to:

    #nav li {
        display: inline;
        margin:225px 2px 0 2px;

    Though, I should point out that it might not be the best solution in the long run. It depends on how you code the rest of the site.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed