sub menu wil niet goed omsluiten in firefox 1.0.x - Softwareontwikkeling

donderdag 18 mei 2006 14:34

Acties:

Verwijderd

Topicstarter

Naar aanleiding van een artikel op www.alistapart.com (http://www.alistapart.com/articles/horizdropdowns/) probeer ik het menu nu horizontaal te maken en zo cross-browser mogelijk. Nu heb ik met de onderstaande code alles redelijk op orde (ja ik gebruik wat hacks en javascript).

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>menu test</title>
<style type="text/css" media="all">
ul#nav{
    width: 600px;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000000;
}
ul li {
    position: relative;
    float: left;
    white-space: nowrap;
    padding: 0px 10px 0px 10px;
}
li ul {
    position: absolute;
    top: 30px;
    display: none;
    border: 1px solid #cccccc;
}
li ul li{
    width: auto;
    clear: left;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
}
li:hover ul, 
li.over ul{
    display: block; 
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { 
    float: left; 
    height: 1%; 
}
* html ul li a { 
    height: 1%; 
}
/* End */

/*\*//*/
ul li{
    width: 20%;
}
/**/
</style>
<!--[if lt IE 7]>
<style type="text/css" media="all">
ul li {
    width: 1%;
}
</style>
<![endif]-->
<script type="text/javascript">
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
              node.onmouseout=function() {
                this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;
</script>
</head>
<body>
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
  <div style="clear: both;"></div>
</ul>
</body>
</html>

In IE 5.x en 6.0 werkt het prima. En ook Firefox 1.5 doet het goed:
Afbeeldingslocatie: http://img137.imageshack.us/img137/8933/iegoed1cr.gif

Maar in Firefox 1.0.x gaat het submenu niet lekker.
Afbeeldingslocatie: http://img252.imageshack.us/img252/1723/fffout5xd.gif

De ul van het submenu wordt niet goed weergegeven.

Ik zou met id's aan de ul's een absolute breedte kunnen meegeven, dan is het opgelost.
Maar het liefste wil ik dit niet doen en de breedte automatisch laten goedzetten.

Dus toen dacht ik aan javascript.
Ik lees hiermee alle ul's uit. En loop de onderliggende li's af.
Ik dacht handig te zijn en dan per ul de breedste li te zoeken en de ul dan deze breedte + eventueel extra ruimte te geven. Maar blijkbaar kun je niet de breedte uitlezen van een li als deze niet is gedefinieerd.

Weet iemand een andere manier om de ul breed genoeg te krijgen, zodat de border mooi omsluit?

donderdag 18 mei 2006 14:38

Acties:

Not Pingu

Dumbass ex machina

Laat de listitems in je submenu floaten, dan past de ul zich in de breedte meteen aan.

Certified smart block developer op de agile darkchain stack. PM voor info.

donderdag 18 mei 2006 14:46

Acties:

Verwijderd

Topicstarter

Ik zit er ff doorheen hoor, hoe doe ik dat?

li ul li{
width: auto;
clear: left;
float: left;
}

ervan maken heeft geen nut, blijft zich hetzelfde gedragen.
De ul moet ik wel absoluut houden, omdat ik die moet positioneren.

donderdag 18 mei 2006 15:38

Acties:

NitroX infinity

Zomaar een gedachte;

Cascading Stylesheet:

li ul li{
    width: auto;
    clear: left;
}

Zou je die width niet bij alle ul en li elementen kunnen zetten?

Graphene; a material that can do everything, except leave the lab. - Asianometry

donderdag 18 mei 2006 16:12

Acties:

Verwijderd

Topicstarter

Nee dit had ik ook al geprobeerd, helpt niet

donderdag 18 mei 2006 16:45

Acties:

Not Pingu

Dumbass ex machina

Verwijderd schreef op donderdag 18 mei 2006 @ 14:46:
Ik zit er ff doorheen hoor, hoe doe ik dat?

li ul li{
width: auto;
clear: left;
float: left;
}

ervan maken heeft geen nut, blijft zich hetzelfde gedragen.
De ul moet ik wel absoluut houden, omdat ik die moet positioneren.

Sorry, ik dacht dat je li ul ook floatte. (Dit is nogal foute-typo-gevoelig

)
Geef je li ul ipv. een vaste breedte een min-height op. Dat werkt niet in IE, daarvoor moet je een height property gebruiken. Maar die mag het in FF weer niet doen. Dat doe ik altijd zo:

Cascading Stylesheet:

li ul
{
  _height: 200px; /* FF negeert dit vanwege de underscore, IE6 pakt het gewoon */
  min-height: 200px; /* IE6 negeert dit omdat ie het niet kent, IE7 kent het volgens mij wel dus dan is je probleem ook opgelost */
}

Certified smart block developer op de agile darkchain stack. PM voor info.