SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal nav bar in N6

    Hi@all!

    I got a slight problem with honizontal nav bars in Netscape6.2.

    If I float the elements <ul><li><a> left, it fails in Netscape6.2. Also, i recognized, that on alot of css-guru-sites the horizontal-nav-bar is made by the 3-float rule, as i've mentioned above, and... yes .. fails. The solution might be: display: inline. But what is the reason to let the navigation fail in N6??? Most of N6 users upgraded to Netscape7???? Please let me see the sun again... How do you handle your horizontal nav bars?

    Thanks,

    s-pirin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    If I float the elements <ul><li><a> left, it fails in Netscape6.2.
    Fails in what way? NN6.2 handles floats not too badly.

    as i've mentioned above, and... yes .. fails.
    Its no good to keep saying it fails when you don't give us the code that is failing

    Its probably only failing because you are doing something wrong ( or are working against a bug).

    How do you handle your horizontal nav bars?
    You take them in hand and gently prize them open . Sorry I've no idea what you mean unless you can provide specific code or preferably a link to the page in question to see exactly whats happening. There are various ways to do horizontal navigation. There are plenty of examples here:

    http://css.maxdesign.com.au/listamatic/


    It may well be NN6 problem but you won't get a definite answer unless you provide us with some necessary information

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B,

    Thanks for your patience...!

    Here is an example-code. It renders lovely in IE5 - 6(Win), Mozilla 1.7, Opera 7.5, Firefox 0.8 and NN7... but horribly fails in NN6.2 (--> means all <li>-elements are one above the other, only the "sitemap"-tab is visible). Maybe the porblem is the NN6 version?? Thanks alot.. :


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head><title>horizontal navbar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="all">
    #nav {
    margin: 0;
    padding: 0;
    float: left;
    width: 500px;
    list-style: none;
    background: #ccc;
    border: 1px solid #000;
    font: small/1.5em verdana, sans-serif;
    font-weight: bold;
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    border-right: 1px solid #000;
    }
    #nav a {
    float: left;
    padding: 6px 10px;
    text-decoration: none;
    color: #555;
    background: #eee;
    }
    #nav a:hover {
    color: #000;
    background: #ccc;
    }
    </style></head>
    <body>
    <ul id="nav">
    <li><a href="#">home</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">galery</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">sitemap</a></li>
    </ul></body></html>
    Last edited by s-pirin; Sep 30, 2004 at 14:54.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you are floating elements without widths and while you can get away with it in some cases, its not recommended and advised in the specs that all floats should have a width defined.

    However with a bit of messing around you can get something that works.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
    <title>horizontal navbar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="all">
    #nav {
     background: #ccc;
     float: left;
     width: 500px;
     border: 1px solid #000;
    }
    #nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
    font: small/1.5em verdana, sans-serif;
    font-weight: bold;
    }
    #nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    * html #nav li{float:left}/* for ie*/
    #nav a {
    float: left;
    padding: 6px 10px;
    text-decoration: none;
    color: #555;
    background: #eee;
    border-right: 1px solid #000;
    }
    #nav a:hover {
    color: #000;
    background: #ccc;
    }
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="nav">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">news</a></li>
      <li><a href="#">galery</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">sitemap</a></li>
    </ul>
    <br class="clearer" />
    </div>
    </body>
    </html>
    Works in NN6.2, IE6, Firefox and OPera7.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!!!


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
  •