✔ Problem mit Menü im IE 7

Status
Nicht offen für weitere Antworten.
d_b

d_b

Mitglied
Moin,
Habe ein Problem mit der Darstellung eines Menüs. Firefox zeigt es richtig an. Also die Submenus werden direkt bündig aufgeklappt. Der IE7 hat allerdings einige Probleme damit - beim überfahren mit der Maus ändert sich nur ein Teil der Hintergrundfarbe und die submenus sind nach rechts verschoben.
Das CSS sieht so aus:

Code: 
#menu {
	background-color:#ffffff;
	width:100%;
	border:0;
	font-size:100%;
	font-family:Verdana;
	margin:0;
	padding:0;	
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li { /* all list items */
	float: left;
	position: relative;
	width: 9em;
}

#menu li ul {/* second-level lists */
	position: absolute;
	display: block; 
	top: 2em;
    left: 0;
}

#menu li>ul {/* to override top and left in browsers other than IE */
	top: auto;
	left: auto;
}

#menu li ul li ul  {/* third-level lists */
	position: absolute;
	display: block; 
	top: 0;
    left: 9em;
}

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

#menu li:hover ul { display: block; }

#menu li:hover>ul { visibility:visible; }

#menu ul ul { visibility:hidden; }		

/* Make-up syles */
#menu ul, li {
    margin: 0 0 0 0; 
}

/* Styles for Menu Items */
#menu ul a {
	display: block;
	text-decoration: none;
	color: #000033;
	background: #fff; /* IE6 Bug */
	padding: 2px;
	border-right:1px solid #ccc;
}
/* Hover Styles */
#menu ul a:hover { 
	background-color:#E60000;
	color:#ffffff;
} 

/* Sub Menu Styles */
#menu li ul a {
	text-decoration: none;
	color: #000033;
	background: #fff; /* IE6 Bug */
	border:0;
	border-bottom: 1px solid #ccc;
    padding:2px;
} 

/* Sub Menu Hover Styles */
#menu li ul a:hover { 
	background-color:#E60000;
	color:#ffffff;
}

Das HTML:
HTML: 
<div id="menu">
	<ul id="menuList">
		<li>
			<a href="#">link 1.1</a>
		</li>
		<li>
			<a href="#">link 2.1</a>
			<ul>
				<li>
					<a href="#">link 3.2</a>
				</li>
				<li>
					<a href="#">link 4.2</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">link 5.1</a>
		</li>
	</ul>
</div>

Ich wäre wahnsinnig dankbar, wenn jemand eine Lösung findet!
vG
David
 
also im Firefox sieht es so aus:
firefoxet5.jpg


im IE7 so:
ie7cz8.jpg


Die ganze Seite findet man hier.
 
Das hängt ausschliesslich mit dem folgenden DIV zusammen, in dem die nachfolgend eingebundenen Elemente horizontal zentriert werden:

Code: 
<body>
    <div align="center">

    </div>
</body>
 
hmm, wenn ich text-align:left; angebe, schließt zwar das Submenu im IE7 richtig an aber ich will den text ja zentriert. Gibt es da einen Workaround? Auch bekomme ich den oberen Rand nicht weg.
Vielen Dank für deine Mühe!
 
Dann setz mal Folgendes um, damit das Layout in der Fenstermitte zentriert wird:

Code: 
<body>
     <div id="wrap">
          ...
     </div>
</body>
Code: 
#wrap {
width:640px;
margin:0 auto;
}
 
Hilft leider nicht...
Ältere Versionen des IE kann man ja über * html #id {...} direkt ansprechen (ich hoffe das ist richtig ;)) - geht das auch mit dem IE7?
 
Kann ja auch nicht, da du nun für die Listenpunkte li text-align:center deklariert hast

Code: 
#menu li { /* all list items */
	float: left;
	position: relative;
	width: 9em;
text-align:center;
}
Zum Vergrößern anklicken....
was den selben Effekt im IE7 hervorruft.

Formatier stattdessen die Links mit text-align:center:

Code: 
/* Styles for Menu Items */
#menu ul a {
        display: block;
        text-decoration: none;
        color: #000033;
        background: #fff; /* IE6 Bug */
        padding: 2px;
        border-right:1px solid #ccc;
        text-align:center;
}
Und falls die Sublinks linksbündig ausgerichtet werden sollen:

Code: 
/* Sub Menu Styles */
#menu li ul a {
        text-decoration: none;
        color: #000033;
        background: #fff; /* IE6 Bug */
        border:0;
        border-bottom: 1px solid #ccc;
        padding:2px;
        text-align:left;
}
 
Bringt leider auch nicht den gewünschten Effekt. Habs jetzt gedreht und gewendet und probiert ohne ende - vielleicht sollte ich mich auch einfach nach einem anderen Menü umschauen...
 
Dann kann ich dir auch nicht weiterhelfen, denn bei mir führen die Vorschläge zum gewünschten Ergebnis.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück