Simple css Navigation does not work in FF

Discussion in 'CSS' started by sseek, Nov 10, 2007.

0
  1. #1
    I have a simple navigation that works fine in IE, but does not work in Firefox. The links do not work at all - the hover aspect as well as the actual link. Can someone please take a look at my code (I won't post everything, just the CSS and the HTML for the navigation).

    I did discover - through process of elimination - that this particular piece of CSS is the culprit (I think): left:50%; but I need it to place the nav. links where I want them.

    FYI, the doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    CSS

    /* navigation */

    #navcontainer {
    left:50%;
    margin:0 0 0 -59px;
    position:absolute;
    width:104px;
    }

    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
    }

    #navcontainer a
    {
    display: block;
    padding: 8px;
    width: 105px;
    background-color: #400000;

    }

    #navcontainer a:link, #navlist a:visited
    {
    color: #D8C6A6;
    text-decoration: none;
    }

    #navcontainer a:hover
    {
    background-color: #D8C6A6;
    color: #400000;
    }



    HTML

    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="http://www.example.com">Home</a></li>
    <li><a href="http://www.example.com/contactus.html"> ContactUs</a></li>
    <li><a href="http://www.example.com/aboutus.html">Who Are We?</a></li>
    <li><a href="http://www.example.com/services.html">Services /Prices</a></li>
    <li><a href="http://www.example.com/portfolio.html">
    Portfolio</a></li>
    </ul>
    </div>


    Thank you!
     
    sseek, Nov 10, 2007 IP
  2. Jimmy Paddy

    Jimmy Paddy Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Nothing wrong with it in FF when I test it...

    Maybe a bug with ur FF?
     
    Jimmy Paddy, Nov 10, 2007 IP
  3. sseek

    sseek Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks...glad to hear that.

    I recently downloaded the most recent version of FF. Probably a bug.
     
    sseek, Nov 10, 2007 IP
  4. sseek

    sseek Peon

    Messages:
    68
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    When just that small segment is tested, it works fine, in both IE and FF. BUT...when included with the rest of the CSS and HTML, it does not work in FF. Any Help please??? Code below:

    CSS


    * {
    border:0;
    margin:0;
    padding:0;
    }

    /* general */
    a {
    color:#400000;
    text-decoration:none;
    }


    img {
    border:2px solid #333;
    }

    /* body */



    body {
    background:#d8c6a6 url('image/content.jpg') center repeat-y;
    color:#333;
    font:0.85em Arial, Helvetica, sans-serif, "bitstream vera sans";
    }


    img {border:0;}

    /****
    Begin Header
    ****/
    #header

    {
    background:url('topbackground.gif');
    height:125px;
    top:0;
    width:100%;


    }
    #header_inside {
    background:url('image/newlogo.gif');
    height:125px;
    margin:0 auto;
    position:relative;
    width:760px;
    }

    #header_inside h1 {
    color:#FFF9CF;
    font:bold 125% "trebuchet ms", helvetica, sans-serif;
    letter-spacing:-1px;
    margin:0 0 -10px;
    padding:15px 0 0;
    text-align:left;
    }
    #header_inside h2 {
    color:#ccc;
    font:200% "trebuchet ms", helvetica, sans-serif;
    letter-spacing:-2px;
    text-align:right;
    }

    /* navigation */
    #navigation {
    left:50%;
    margin:0 0 0 -61px;
    position:absolute;
    width:122px;
    }
    #navigation li {
    list-style:none;
    }
    #navigation li a {
    color:#fff;
    display:block;
    height:50px;
    line-height:50px;
    text-align:center;
    text-decoration:none;
    }
    #navigation li a:hover {
    background:#d8c6a6;
    color:#332407;
    }
    #navigation li a.active {
    background:#d8c6a6;
    color:#332407;
    }

    /*content */
    #content {
    left:50%;
    margin:0 0 0 -380px;
    position:absolute;
    width:760px;
    }

    /* left */
    .left {
    float:left;
    padding:10px 0 0;
    width:304px;
    }
    .left p {
    padding:10px;
    }
    .left h1 {
    border-bottom:1px solid #888;
    font-size:1.1em;
    padding:10px 0 0;
    }

    .left h2 {

    font-size:1.0em;
    padding:10px 0 0;
    }

    .left code {
    border:1px solid #400000;
    border-left:9px solid #400000;
    display:block;
    margin:10px;
    padding:10px;
    text-align:left;
    }
    .left li {
    list-style:circle;
    margin:0 0 0 30px;
    }

    /* center */
    .center {
    float:left;
    width:152px;
    }

    /* right */
    .right {
    float:right;
    padding:10px 0 0;
    width:304px;
    }
    .right h1 {
    font-size:1.1em;
    padding:0 0 10px;
    text-align:left;
    }

    .right h3 {
    border-bottom:1px solid #888;
    font-size:1.1em;
    padding:10px 0 0;
    }

    .right p {
    padding:10px;
    }

    .right code {
    border:1px solid #400000;
    border-right:9px solid #400000;
    display:block;
    margin:10px;
    padding:10px;
    text-align:left;
    font:0.9em Arial, Helvetica, sans-serif, "bitstream vera sans";
    }

    #imageleft {
    float:left;
    padding-right:7px;
    padding-bottom:7px;
    }


    blockquote p {
    margin:0;
    padding:0;
    font-size:85%;
    font-style:italic;
    color:#333;
    border:1px solid #400000;
    border-right:9px solid #400000;
    }




    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta name="ROBOTS" content="INDEX,FOLLOW">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>

    <body>
    <div id="header">
    <div id="header_inside">
    </div>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="http://www.example.com">Home</a></li>
    <li><a href="http://www.example.com/contactus.html">Contact Us</a></li>
    <li><a href="http://www.example.com/aboutus.html">Who Are We?</a></li>
    <li><a href="http://www.example.com/services.html">Services / Prices</a></li>
    <li><a href="http://www.example.com/portfolio.html">Portfolio</a></li>
    </ul>
    </div>

    <div id="content">
    <div class="left" >
    <p>Content goes here</p>
    </div>

    <div class="center" >
    <!-- DO NOT REMOVE THIS CENTER SECTION AS IT IS NEEDED BY THE DESIGN-->
    </div>
    <div class="right">
    <blockquote><p> this page contains a lot of info.</p></blockquote>


    <div style="text-align:center">
    <p></p>
    <p></p>
    <p>Copyright &copy; <a href="http://www.example.com">example.com</a> 2007<br/>
    </div>


    </div>
    </div>
    </body>

    </html>
     
    sseek, Nov 10, 2007 IP