CSS Problem IE

zoom · 24.05.09

Moin!

Ich habe folgenden html-Code:

Code:

<html>
<head>
<style type="text/css">
#menu {
	position: absolute;
	margin-top: 30px;
}
#menu li {
	display: inline;
}
#menu a {
	padding: 7px 10px;
}
#menu a:hover {
	border-top: 4px solid red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Leider wird beim hover das border-top im IE(kleiner gleich 7.0) nicht angezeigt. Sobald ich das position: absolute im menu-div weglasse, ist alles in Ordnung. Ich brauche allerdings die absolute Position für das weitere Drumherum.
Kann man dem IE irgendwie beibringen, was er tun soll, oder habt ihr einen Lösungsansatz?

Gruß zoom

pepi · 24.05.09

IE6 ist der letzte Schrott aufgrund des massiv gestörten Box Models. Investiere sinnvollerweise keinen Augenblick Zeit in diesen Browser mehr! IE6 muß endlich sterben! Man führe sich vor Augen, daß dieser Browser älter ist als der iPod! Als jeder iPod!
Gruß Pepi

wipeout · 24.05.09

pepi schrieb:
Investiere sinnvollerweise keinen Augenblick Zeit in diesen Browser mehr!

Leider ist das nicht ohne weiteres möglich, da dem IE6 immer noch viel zu viel Beachtung geschenkt wird. Solange sich daran nichts ändert, muss auch weiterhin schön für den IE6 optimiert werden.

pepi schrieb:
IE6 ist der letzte Schrott aufgrund des massiv gestörten Box Models.
IE6 muß endlich sterben!

Da geb' ich dir Recht!

pepi · 24.05.09

Solange Leute immer noch auf den IE6 Rücksicht nehmen werden die Leute nie mit dem Schrott aufhöhren!
Man muß dem Kunden auch mal klarmachen, daß Legacy Support für IE6 mehr kostet. Man werkt meist nochmal so lange wie für Standardkonformen nochmal an den Bugs im IE.

Es ist nicht gesichtert, daß Du Dein Problem mit IE überhaupt lösen kannst. Das Box Model im IE6 ist hoffnungslos defekt.
Gruß Pepi

zoom · 25.05.09

Moin!

Der Fehler tritt auch beim IE 7 auf. Und den kann man nun leider auf keinen Fall vernachlässigen. Also gibt es Lösungsansätze?

Gruß zoom

wipeout · 25.05.09

Einen Lösungsansatz habe ich bisher nicht. Das ist aber bei dem IE6 auch recht schwierig gleich am Anfang irgendwelche Fehler zu korrigieren.

Ist das bisher alles an Code was du geschrieben hast?

Mein Tipp:
Schreibe erst einmal deinen kompletten Code zu ende und achte zunächst nur auf eine richtige Darstellung für Gecko-Browser. Wenn du damit fertig bist und alles richtig dargestellt wird, dann wende dich der Baustelle IE6 zu. Gegebenenfalls musst du dich noch einmal melden.

Nach der Methode verfahre ich immer und ich fahre damit recht gut.

zoom · 25.05.09

Hallo Jens,

wie bereits erwähnt geht es mir hier nicht darum, dass der IE6 einen Fehler macht. Viel wichtiger ist, dass ich den IE7 dazu bringen muss das zu tun, was die anderen Browser auch tun. Es ist also ein Problem, was der IE7 verursacht. (Der Fehler im IE6 wäre mir egal.)
Der gegebene Quellcode ist natürlich nicht alles. Ich bereits die komplette Seite fertig und zum Schluss die Kompatibilität zum IE getestet. Da gehe ich also ähnlich vor wie du. Leider stellt der IE eben bei absoluter Position keinen Rahmen dar.
Meine Frage ist halt, ob es da eine Lösungsmöglichkeit gibt.

Gruß zoom

wipeout · 26.05.09

Hallo zoom,

ich konnte das Problem ausfindig machen.

Du musst folgendes

Code:

#menu {
  position: absolute;
  [COLOR=Red]margin-top: 30px;[/COLOR]
}

in das hier ändern:

Code:

#menu {
  position: absolute;
  [COLOR=Red]padding-top: 30px;[/COLOR]
}

Funktioniert bei mir sowohl im IE6 als auch im IE7.

zoom · 26.05.09

Jens, das funktioniert tatsächlich. Diese scheinbare Willkür des IE ist echt beeindruckend.
Leider stellt sich nun heraus, dass mein Framework doch ein wenig anders aussieht.

Code:

<html>
<head>
<style type="text/css">
#menu {
	width: 100%;
	font-weight: bold;
}
#menu ul {
	position: absolute;
	width: 750px;
	height: 30px;
	left: 50%;
	margin: 0 0 0 -380px;
	padding: 7px 0;
	list-style-position: inside;
	list-style-type: none;
}
#menu li {
	display: inline;
}
#menu a {
	padding: 7px 10px;
}
#menu a:hover {
	border-top: 4px solid red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Der Fehler besteht hier weiterhin... Ich kann einfach nicht herausfinden, woran das liegt. Hat da jemand noch eine Idee?

wipeout · 26.05.09

Habe eben noch einmal den Code unter die Lupe genommen und ein paar Änderungen vorgenommen. Läuft bei mir jetzt im IE6 bzw. IE7.

Code:

<style type="text/css">
#menu {
    width: 100%;
    font-weight: bold;
}
#menu ul {
    position: absolute;
    width: 750px;
    height: 30px;
    left: 50%;
    margin: 0 0 0 -380px;
    padding: 5px 0px 0px 0px;
    line-height: 30px;
    list-style-position: inside;
    list-style-type: none;
}
#menu li {
    display: inline;
}
#menu a {
    padding: 7px 10px 0px 10px;
}
#menu a:hover {
    border-top: 4px solid red;
}
</style>

zoom · 26.05.09

Jens, Vielen Dank für deine Hilfe! Das klappt jetzt alles wunderbar.

wipeout · 26.05.09

Keine Ursache. Viel Spaß mit deiner Homepage!

Suche

Suche

CSS Problem IE

zoom

Antonowka

pepi

Cellini

wipeout

Ribston Pepping

pepi

Cellini

zoom

Antonowka

wipeout

Ribston Pepping

zoom

Antonowka

wipeout

Ribston Pepping

zoom

Antonowka

wipeout

Ribston Pepping

zoom

Antonowka

wipeout

Ribston Pepping

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)