display:block beim IE

F

Felixh

0
Hallo

ich hätte mal wieder ein kleines Problem:
Im Moment bastel ich an einem neuen Design für meine Homepage, da das alte ja doch schon leicht abgenutzt ist.
Bisher habe ich es geschafft, die macken des IE so gut es ging auszubügeln. Aber jetzt habe ich ein Problem, auf was ich mir keinen Reim machen kann:

Das Menü besteht aus einer liste:

Code: 
<div id="cont_nav">
	<h1>Inhalt</h1>
		<ul>
			<li><a href="#">a</a></li>
			<li><a href="#">b</a></li>
		</ul>
		<h1>blablub</h1>
		<ul>
			<li><a href="#">a</a></li>
			<li><a href="#">b</a></li>
		</ul>
</div>
.....

#cont_nav h1 {
	background-color: #e70000;
	display: block;
	font-size: 0.9em;
	text-align: center;
	text-decoration: underline;
	margin: 0;
	border-bottom: 1px #000000 solid;
}

#cont_nav ul {
	padding: 0px;
	padding-left: 30px;
	margin: 0px 10px;
	font-size: 13px;
	list-style-image: url(/img/menu_arrow.gif);
	font-weight: 800;
}

#cont_nav a {
	display:block;
}

#cont_nav li:hover {
	list-style-image: url(/img/menu_arrow_active.gif);
}

das ganze wird per CSS schön gestaltet. Sieht in allen Browsern auch recht gut aus, nur der IE springt hier wieder mal aus der Reihe, und fügt einen weiteren zeilenumbruch ein. Ich habe das Problem bereits auf das display: block; zurückverfolgt, dass ich auf die a-tags anwende. Rausnehmen will ich das eigentlich nicht, es soll die ganze Fläche als Link dienen.

Kennt jemand eine Möglichkeit, diese Überschüssige zeile im IE zu löschen?
 
soweit ich das jetzt überflogen habe, ist das ein IE 6 Bug, im IE 7 sollte das funktionieren, es gibt da nen hack für.. muss den aber eben raus suchen
 
Setz

#cont_nav li

auf "height: 1%;" und frag nicht wieso das im IE6 dann auch geht ;)

Und das hier

Code: 
#cont_nav li:hover {

wird der IE6 auch nicht verstehen da er die Pseudoklasse hover nur bei Link-Tags (<a>) kennt.
 
WOW! danke, es geht!

Das mit den Pseudoklassen bin ich mir bewusst. Aber mir fällt sonst einfach kein anderer weg ein, dass zu Bewerkstelligen. IE-User werden es dann eben aushalten müssen, wenn sich das Menü nicht einfärbt :P

//EDIT:

Wäre es nicht auch möglich, das ul durch ein div zu ersetzen, die li's ganz wegfallen zu lassen? und dann die bullet-Grafik als Hintergrundbild zu nehmen?
So müsste man doch auch dieses Pseudoklassen-Problem lösen können.
 
Möglich ja, aber nicht sinnvoll wenn es sich um ein Menü handelt. So wie es jetzt ist ist es semantisch korrekt formuliert. Das Pseudoklassen-Problem kannst Du aber auch so lösen indem du die Links in den li die Grafik gibst und alle Listengrafiken abschaltest.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben