CSS Dropdown im IE6/7 verkrüppelt

[benninet]

Hallo,

Ich hab ein Problem, hab ein CSS Dropdownmenü zusammengebastelt das (in vernünftigen Browsern) soweit ohne Javascript funktioniert. Im IE6 hab ich dann mit Conditional Comments eine HTC Datei nachgeliefert die auch ihn dazu befähigen soll. Funktioniert auch soweit, nur halt das im IE das ganze leicht verkrüppelt aussieht:

http://myBlackbox.net/schule/design1

Bild für die Glücklichen die keinen IE zur verfügung haben:

http://myBlackbox.net/welcher_browser.png

Oben FFX, unten IE7

Code:

<div id="wrapper">
		<div id="header">
			<img src="http://www.tutorials.de/forum/images/logo.jpg" alt="header" />
			<div id="menubar">

				<ul id="navi">
				  <li><a href="#">Willkommen</a></li>
				  <li><a href="#">Über uns</a>
				    <ul>
				      <li><a href="#">Angebot</a></li>
				      <li><a href="#">Geschichte</a></li>
				      <li><a href="#">Jobs</a></li>
				    </ul>
				  </li>
				  <li><a href="#">Projekte</a>
				    <ul>
				      <li><a href="#">Alpha</a></li>
				      <li><a href="#">Beta</a></li>
				      <li><a href="#">Gamma</a></li>
				    </ul>
				  </li>
				  <li><a href="#">Impressum</a></li>
				</ul>
			</div>
		</div>
	</div>

relevantes CSS:

#wrapper {
	width: 798px;
	border-left: 1px solid darkblue;
	border-right: 1px solid darkblue;
	margin: auto;
	min-height: 100%;
	background-color: white;
	
}

#menubar {
width: 100%;
height: 35px;
background-image: url(images/menubar.jpg);

}

#header { font-size: 0px; }

 #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */

		#navi li { width:128px; float:left;} /* Horizontale Anordnung */
		
		#navi li ul { display:none; } /* Normalzustand eingeklappt */
		#navi li:hover ul { display:block;} /* Ausgeklappt */
		
      /*###################*/
	  /* Styles fuers Auge */
	  /*###################*/
	  

	  
	  #navi { position:absolute; }
	  
	  #navi li {

		  border-right:1px solid #000;
		  padding:7px 16px 0 16px;
		  height: 28px;
		  font-family: sans-serif;
		  font-size: 14px;
		  
	  }
	  
	  #navi li:hover { background-image: url(images/menubar_h.jpg); }

	  #navi ul li { 
		border-bottom: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		margin: 0; height: 20px;
		background-color: #BBBBBB;
		padding: 0px 0px 0px 0px;
		
		}
	  #navi ul {margin-top: 8px; border-top: 1px solid black;}
		
	  #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em;}
	  #navi ul li a {text-align: left; }
	  #navi a:link, #navi a:visited { color:#000;  text-decoration:none; }
	  #navi a:active, #navi a:hover { color:#000;  text-decoration:underline; }

Kann mir da jemand helfen?

Danke schonmal, ...

 

[Maik]

Hi,

das "verkrüppelte Aussehen" resultiert aus der text-align:center-Deklaration für den Dokumentkörper, die an seine Nachfahren vererbt wird.

Lösung: den Inhalt im DIV#wrapper einfach explizit linksbündig ausrichten.

#wrapper {
        width: 798px;
        border-left: 1px solid darkblue;
        border-right: 1px solid darkblue;
        margin: auto;
        min-height: 100%;
        background-color: white;
        text-align: left;
}

 

[benninet]

Danke, das ist schonmal ein großer Fortschritt, aber eine gewisse "Verkrüppelung" was die Darstellung des Dropdowns angeht gibts immer noch

 

[Maik]

Mit dem XML-Prolog vor der Doctype-Deklaration schaltet der IE6 in den Quirksmode, und in diesem Darstellungsmodus unterstützt er nicht das CSS-Boxmodell.

 

[benninet]

Danke, echt super, hab <?xml version="1.0" encoding="ISO-8859-1"?> raugenommen. Gefällt mir eigentlich nicht so, aber eine Kompromisslösung scheint es nicht zu geben. Wie auch immer, ein paar hässlich dargestellte Ränder sind wohl geblieben, aber die kriegt man wohl sicherlich auch noch irgendwie weg :suspekt:

 

[Maik]

Die unerwünschte senkrechte Wiederholung des Hintergrundbildes im Submenü kannst du mit background-repeat:repeat-x abstellen, da ohne jegliche Angabe der Hintergrund vom IE auch auf der y-Achse wiederholt wird:

#navi li:hover { background-image: url(images/menubar_h.jpg); background-repeat: repeat-x; }

oder in Kurzform mit der background-Eigenschaft:

#navi li:hover { background: url(images/menubar_h.jpg) repeat-x; }

 

[benninet]

Und nochmal danke

Eins wäre da noch, was aber auch im IE7 ist: http://myBlackbox.net/rand.jpg

 

[Maik]

Übergib die Rahmenangaben mal besser an die Links, anstelle der Listenpunkte.

 

[benninet]

Du bist echt super

Fast perfekt, muss am ende der frickelei den CSS Code nochmal ordentlich aufräumen aber daran solls jetzt nicht liegen. Der IE7 zeigts jetzt auch komplett richtig an, allerdings übernimmt der 6er den border-right des oberen li im ausgeklappten zustand was eine hässliches Linie erzeugt. UND er gibt den DIV im gegensatz zu vernünftigen browser keine 100% height :S

Aber auf jeden Fall schonaml großer Danke an dich

 

[Maik]

Darum hatte ich auch empfohlen, den rechten Rahmen an die Links zu übergeben.

Mit dieser Regelerweiterung streckt der IE6 die Box auf eine 100%-Höhe, da er die min-height-Eigenschaft nicht unterstützt:

#wrapper {
	width: 798px;
	border-left: 1px solid darkblue;
	border-right: 1px solid darkblue;
	margin: auto;
	min-height: 100%;
	height: auto !important; /* auto-height mit !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE6 */
	background-color: white;
        text-align:left;
}