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

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.

    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" ""&gt;
    <html xmlns=""&gt;
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />

    <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>



    # April 26, 2009 at 1:42 am

    Hey man,

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

  • Enter
  • Rules
  • Privacy

Let me know how that works.
Ashton Sanders

# April 26, 2009 at 10:40 am


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.


# 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.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed