claudi22: Navigationsfeld unterschiedlich in IE & FF

Hi ihr,

ich versuche mich seit ein paar Wochen an CSS und habe mir in den Kopf gesetzt, ein Dropdown Menu zu testen. Soweit so gut. Es wird nun im IE (7) korrekt angezeigt (was eigentlich das Ziel war), aber im FF leider dafür nicht mehr. Sowohl die Abstände stimmen nicht, als auch die Hintergrundfarbe der Navigationsbox. Ich hab schon etliches nachgelesen, auch den Validationscheck drüberlaufen lassen, aber komme nicht auf das Problem. Hat jemand vielleicht eine Idee?

Testseite

Vielen Dank & beste Grüße,
Claudi

  1. Hallo,

    ich versuche mich seit ein paar Wochen an CSS und habe mir in den Kopf gesetzt, ein Dropdown Menu zu testen. Soweit so gut. Es wird nun im IE (7) korrekt angezeigt (was eigentlich das Ziel war), aber im FF leider dafür nicht mehr. Sowohl die Abstände stimmen nicht, als auch die Hintergrundfarbe der Navigationsbox. Ich hab schon etliches nachgelesen, auch den Validationscheck drüberlaufen lassen, aber komme nicht auf das Problem. Hat jemand vielleicht eine Idee?

    Testseite

      
    #nav, #nav ul {  
    	padding: 0;  
    	margin-left: 0px;  
    	list-style: none;  
    	background-color: #ffffff;  
    	width: 56.25em;  
    	line-height: 1.5;  
    	font-weight: bold;  
    	border: solid #0e5681;  
    	border-width: 1px 0;  
    	}  
      
    #nav a {  
    	display: block;  
    	width: 10em;  
    	padding: 0.25em 3em;  
      
    }  
      
    #nav li {  
    	float: left;  
    	width: 10.5em;  
    	font-size: 12px;  
    }  
    
    

    Problem 1, Höhe der UL#nav:
    Die LI-Elemente im UL#nav werden durch FLOAT aus dem normalen Fluss genommen. Dadurch beeinflussen sie die Höhe der UL#nav nicht mehr. Diese ist also 0px hoch. Die Hintergrundfarbe deshalb auch nicht sichtbar.

    Lösung:
    Ein HEIGHT-Wert für UL#nav
    oder
    overflow:hidden für UL#nav wunderwaffe-overflow

    Problem2, Breite der #nav li:
    Die ist bei Dir sehr widersprüchlich definiert. Einersets sagst Du, die A-Elemente in diesen LI-Elemente sollen 3em+10em+3em = 16em breit sein. Dann sagst Du aber, die LI-Elemente selbst sollen nur 10.5em breit sein. Was denn nun? Wenn es wie im IE aussehen soll, dann lass die Breitenangabe für die #nav li einfach weg.

    Btw: Wofür sind eigentlich die DIV-Elemente gut, in denen die A-Elemente stehen?

    <ul id="nav">  
    ...  
    	<li>  
    		<div><a href="">Therapie</a></div>  
    ...  
    
    

    viele Grüße

    Axel

    1. Lieber Axel,

      sensationell, vielen Dank! Ich hab daran schon so lange rumgetan. Hätte ich gewusst, dass die Lösung ein Height-Wert ist...
      Wenn ich die Breitenangabe für die #nav li weglassen, dann werden da seltsamerweise zwei Spalten draus, was ja wiederum auch nicht der Wunsch ist. Das macht aber nichts, da es alleine durch die Lösung des ersten Problems eigentlich schon so aussieht, wie ich es wollte.
      Bezüglich der divs... nun ja, wenn Du so fragst, dann geh ich davon aus, dass die keinen Sinn haben ;) Man kommt wohl manchmal etwas durcheinander mit CSS Büchern, Foren, Tutorials - ehrlich gesagt weiß ich gar nicht, warum ich die Links in divs gesetzt hab. Aber gut zu wissen, dass es nicht nötig ist.

      Nochmals besten Dank,
      Claudi