SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why does this horizontal nav break only in FF?

    I've put together a horizontal nav menu that centres left-floated divs quite well, using an outer <del> tag styled using 'display:inline-block' for IE, and for the Gecko browsers 'display:table/table-cell' . It works fine, except when I introduce a "home" image at the left, it falls apart in FireFox (and only FireFox, as far as I can see). Any ideas why?

    here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>CSS centred nav menu</title>
    <style type="text/css">
    
    #centrecontainerhome {
    position:relative;
    top:0px;
    width:750px;
    height:400px;
    margin: 0px auto 0px auto;
    }
    
    #navmenucontainer {
    width:100%;
    height:2em;
    line-height: 2em;
    background-color:#CC0066;
    text-align:center;
    }
    
    
    .container {
    clear:both;
    text-decoration:none;
    }
    
    * html .container {
    display:inline-block;
    }
    
    
    #menu {
    display:table;
    padding:0; 
    margin:0 auto; 
    list-style-type:none;
    white-space:nowrap;
    }
    
    #menu li {
    display:table-cell;
    }
    
    * html #menu li {
    float:left;
    }
    
    #menu a {
    width:auto;
    display:block;
    padding: 0px 0.5em 0px 0.5em;
    color:#fff; 
    background:#CC0066; 
    text-decoration:none;
    }
    
    * html #menu a {
    float:left;
    }
    
    #menu a:hover {
    color:#CC0066;
    background:#FBDBEB;
    }
    
    
    ul.menu li.home {
    display:table-cell;
    background:url("HomeOver.gif") no-repeat 50% 50%;
    }
    
    * html ul.menu li.home {
    float:left;
    background:url("HomeOver.gif") no-repeat 50% 50%;
    }
    
    
    #menu li.home a {
    display:table-cell;
    width:26px;
    background:url("HomeOut.gif") no-repeat 50% 50%;
    }
    
    * html #menu li.home a {
    display:table-cell;
    width:26px;
    background:url("HomeOut.gif") no-repeat 50% 50%;
    }
    
    
    #menu li.home a:hover {
    display:table-cell;
    background:url("HomeOver.gif") no-repeat 50% 50% #FBDBEB;
    }
    
    * html #menu li.home a:hover {
    display:table-cell;
    background:url("HomeOver.gif") no-repeat 50% 50% #FBDBEB;
    }
    </style>
    </head>
    <body>
    <div id="centrecontainerhome">
    <div id="navmenucontainer">
    <del class="container">
    <ul id="menu">
    <li class="home"><a href="#">&nbsp;</a></li>
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#">third</a></li>
    <li><a href="#">fourth</a></li>
    <li><a href="#">fifth</a></li>
    <li><a href="#">sixth</a></li>
    <li><a href="#">seventh</a></li>
    </ul>
    </del><!--end container-->
    </div><!--end navmenucontainer-->
    </div><!--end centrecontainerhome-->
    </body>
    </html>
    Like I said it works fine if I delete the "home image" list item.

    An example can be seen here.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why in the world are you using a DEL element as a menu container? Are you saying that there used to be a menu, but it has been removed?

    Gecko browsers have some issues about rendering DEL and INS elements as block-level boxes. It has to do with the unique traits that these two elements have: they can be either inline or block-level elements depending on where they occur. The parser in Gecko browsers cannot quite cope with this, but presumes that they are inline elements. Therefore certain CSS styles are not inherited properly.

    (In Opera 9tp2, the house icon doesn't appear at all, BTW.)
    Birnam wood is come to Dunsinane

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    #menu li,#menu a{display:table-cell;}

    Hope i did not clean it up to much
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>CSS centred nav menu</title>
    <style type="text/css">
    <!--
    *{margin:0;padding:0;}
    
    #centrecontainerhome {
    position:relative;
    top:0px;
    width:750px;
    height:400px;
    margin: 10px auto 0px auto;
    }
    
    #navmenucontainer {
    background:#CC0066;
    text-align:center;
    }
    
    .container {text-decoration:none;}
    
    * html .container{display:inline-block;}
    
    #menu{
    display:table;
    margin:0 auto; 
    list-style-type:none;
    white-space:nowrap;
    }
    
    #menu li,#menu a{display:table-cell;}
    
    #menu a{
    padding: 0px 0.5em 0px 0.5em;
    color:#fff; 
    background:#CC0066; 
    text-decoration:none;
    }
    
    #menu a:hover{
    color:#CC0066;
    background:#FBDBEB;
    }
    
    * html #menu li,* html #menu a{float:left;}
    
    #menu li.home a{width:26px;background:url("HomeOut.gif") no-repeat 50% 50%;}
    
    #menu li.home a:hover{background:url("HomeOver.gif") no-repeat 50% 50% #FBDBEB;}
    -->
    </style>
    </head>
    <body>
    <div id="centrecontainerhome">
    <div id="navmenucontainer">
    <del class="container">
    <ul id="menu">
    <li class="home"><a href="##">&nbsp;</a></li>
    <li><a href="##">first</a></li>
    <li><a href="##">second</a></li>
    <li><a href="##">third</a></li>
    <li><a href="##">fourth</a></li>
    <li><a href="##">fifth</a></li>
    <li><a href="##">sixth</a></li>
    <li><a href="##">seventh</a></li>
    </ul>
    </del><!--end container-->
    </div><!--end navmenucontainer-->
    </div><!--end centrecontainerhome-->
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you!

    AutisticCuckoo - I was using the <del> technique to try and center the left-floating divs, and mostly it works, but thanks for those notes on the Gecko browsers.

    all4nerds - that's an elegant solution which appears to work in all browsers! - thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •