The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS New to CSS and having problems

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #23565

    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!


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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.