[HaBo]

Felixh · 14.04.09, 18:19

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?

SilentBoB · 14.04.09, 19:09

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

Anzeige

- Anzeige -

Zwirni · 15.04.09, 08:48

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.

Felixh · 15.04.09, 10:49

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

//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.

Zwirni · 15.04.09, 20:17

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.

Anzeige

- Anzeige -

14.04.09, 18:19	#1 (permalink)
Felixh Registriert seit: 12.01.08 Likes: 0	display:block beim IE Anzeige 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?

15.04.09, 08:48	#3 (permalink)
Zwirni Registriert seit: 20.01.03 Likes: 0	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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Pw block Live systeme	careas	Linux/UNIX	2	23.09.09 18:42
Inodes zeigen auf Block?	Serow	Linux/UNIX	2	25.01.09 18:35
Cd-Emulations Block legal?	titania	Games	16	05.09.06 13:15
Msn/windows datei block..	f100d	Applikationen	2	16.03.06 17:29
port-block umgehen	matrixII	Network · LAN, WAN, Firewalls	5	17.08.03 13:24

14.04.09, 19:09	#2 (permalink)
SilentBoB Registriert seit: 26.06.05 Likes: 0	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

15.04.09, 10:49	#4 (permalink)
Felixh Themenstarter Registriert seit: 12.01.08 Likes: 0	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 //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.

15.04.09, 20:17	#5 (permalink)
Zwirni Registriert seit: 20.01.03 Likes: 0	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.

[HaBo]

display:block beim IE