Grow your CSS skills. Land your dream job.

Three State Menu Exercise – firefox problem

  • # April 26, 2009 at 12:44 am

    I am having problems with this exercise. The code looks fine in IE but does not display properly in Firefox. The indent -9999 doesn’t look like it is working. In firefox the list shows up on the page above the menu.

    This link is where I was playing around.

    http://www.flowersfromduboeuf.com/enter.html

    The style.css is

    *{
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    }

    #page-wrap {
    width: 500px;
    margin: 0 auto;
    }

    ul#menu {
    list-style: none;
    }
    ul#menu li {
    display: inline;
    }
    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 100px;
    float: left;
    }
    ul#menu li a.enter {
    background: url(images/menu-enter.jpg) no-repeat bottom center;
    width: 158px;
    }
    ul#menu li a.rules {
    background: url(images/menu-rules.jpg) no-repeat bottom center;
    width: 135px;
    }
    ul#menu li a.privacy {
    background: url(images/menu-privacy.jpg) no-repeat bottom center;
    width: 157px;
    }
    ul#menu li a.enter:hover, ul#menu li a.enter:active,
    ul#menu li a.rules:hover, ul#menu li a.rules:active,
    ul#menu li a.privacy:hover, ul#menu li a.privacy:active {
    background-position: center center; {
    }
    body#enter ul#menu li a.enter,
    body#rules ul#menu li a.rules,
    body#privacy ul#menu li a.privacy {
    background-position: top center;
    }

    Here is the enter.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Enter</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body id="enter">

    <div id="page-wrap">

    <ul id="menu">

    <li><a class="enter" href="/enter.html"</a>Enter</li>
    <li><a class="rules" href="/rules.html"</a>Rules</li>
    <li><a class="privacy" href="/privacy.html"</a>Privacy</li>
    <ul>

    </div>

    </body>
    </html>

    # April 26, 2009 at 1:42 am

    Hey man,

    Your List Item HTML is a little messed up. Here’s it corrected:

    Code:
  • Enter
  • Rules
  • Privacy

Let me know how that works.
Ashton Sanders

# April 26, 2009 at 10:40 am

Aston,

Thanks very much. Must have been that 3:00am brain erosion or the Stargate reruns distracting me!

BTW, this is a really good site. Good info, but really helpful forum.

Bert

# April 26, 2009 at 1:29 pm

You’re very welcome.

I agree, it’s a shame I didn’t find it years ago when I first started. Lots of great posts and information.

Ashton Sanders

# May 21, 2009 at 1:02 am
"AshtonSanders" wrote:
Hey man,

Your List Item HTML is a little messed up. Here’s it corrected:

Let me know how that works.
Ashton Sanders

Just wanna say thank you for the codes that you have been shared.
I am hoping that this will not be the last post that I could be read written by you.

_________________
Indianapolis Web Design

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

You must be logged in to reply to this topic.

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