Forums

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

Home Forums CSS Three State Menu Exercise – firefox problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #24693
    og_77
    Member

    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>

    #56742
    AshtonSanders
    Participant

    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

#56751
og_77
Member

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

#56753
AshtonSanders
Participant

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

#57883
Jaime17
Member
"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)