Internet Explorer Bug in CSS bei Listen und Überschriften

Es gibt so viele IE-Bugs bei der Darstellung von HTML und CSS, dass ich beim Erstellen einer Website für ein Unternehmen natürlich auch einen erwischen musste. Und wie es so ist, kann ich weit und breit im Netz keine Lösung finden, die auch tatsächlich funktioniert.

Sachverhalt: Ich stelle auf der Website ein einfaches Menü zusammen. Es besteht aus einer ul, sowie h1 und h2. Zum besseren Verständnis mal die Screenshots der Ausgabe im Firefox und im IE7:

Screenshot Firefox und IE7

Der dazugehörige Code:

CSS des Navigationsbereichs:

ul#navi {
position:absolute;
top:120px;
bottom:20px;
left:0;
font:normal 1em arial,sans-serif;
float: left;
width: 146px;
margin: 0em;

padding: 1em 1em;
background-color:#EEEEEE;
border:1px solid silver;
}

ul#navi h1 {
font:bold 1em arial,sans-serif;
}

ul#navi h2 {
font:normal 1em arial,sans-serif;
margin: 1em 0 0 0;

}

ul#navi li {
list-style:none;
font:normal 0.8em arial,sans-serif;
margin: 0.2em 0.7em;
padding: 0;
}

ul#navi a{
color:#8B8B83;
font:normal 1em arial,sans-serif;
text-decoration:none;
}

ul#navi a:hover{
color:#EEB422;
font:normal 1em arial,sans-serif;
}

ul#navi a:visited{
color:#002260;
font:normal 1em arial,sans-serif;
text-decoration:none;
}

Globale Definitionen in CSS:

body,html {
color: #8B8B83;
background-color: #FFFFFF;
font-size: 1em;
font-family: Helvetica,Arial,sans-serif;
height:100%;
margin: 0;
padding: 0 0;
text-align: center;

}

Und der Quelltext der Navigation:

<ul id=“navi“>
<h1>Menü n </h1>
<h2>Submenü 1 </h2>
<li>Detail_1 </li>
<li>Detail_2 </li>
<li>Detail_n </li>
<h2>Submenü 2 </h2>

<li>Detail_1 </li>
<li>Detail_2 </li>
<li>Detail_n </li>
<h2>Submenü n </h2>
</ul>

Falls es relevant ist: Der Doctype:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
http://www.w3.org/TR/html4/loose.dtd“&gt;
<html lang=“de“>
<head>
<title>Blattgoldshizznit</title>
<meta http-equiv=“content-type“ content=“text/html; charset=ISO-8859-1″>
<meta http-equiv=“Content-Style-Type“ content=“text/css“>

Wie man auf den Screenshots sieht, geht es um den Übergang zwischen dem letzten Listeneintrag („Detail_n“) unter „Submenü 1“ und dem darunter stehenden „Submenü 2“. Im IE wird die Schriftgröße der h2 in Relation zu den Listenelementen gesetzt, anstatt zur gesamten Seite. Zusätzlich ist die Überschrift auf die Höhe der Liste eingezogen.

Ich habe bereits mit verschiedenen Darstellungsarten (in Prozent, in Pixeln und als em) herumgespielt, aber leider ohne Erfolg. Gibt es einen Workaround für diesen Bug? Liegt der Fehler bei mir? Oder gibt es eine Möglichkeit, das Menü (optisch muss es genau so aussehen, wie es jetzt im Firefox ist) anders zu erstellen?

Und wie kann ich eigentlich bei Listen mit CSS einen Strich („-„) vor die Aufzählung setzen? Und wie kann ich testen, wie die Seite in IE 6 aussieht? Und überhaupt?

————————————————————

[Nachtrag 16.11.07 11:15 Uhr:]

Ich habe die Lösung:

CSS:

ul#main {
list-style:none;
margin:0;
padding: 150px 0 0 0.2em;
border:1px solid silver;
background-color:#EEEEEE;
}

ul#main li{
padding-bottom:0.5em;
}

ul#main a{
color:#8B8B83;
font:normal arial,sans-serif;
text-decoration:none;
}

ul#main a:hover{
color:#EEB422;
font:normal arial,sans-serif;

}

ul#main a:visited{
color:#002260;
font:normal arial,sans-serif;
text-decoration:none;
}

/* hack to fix IE/Win’s broken rendering of block-level anchors in lists */
#main li {border-bottom: 1px solid #eeeeee;}

/* fix for browsers that don’t need the hack */
html>body li#main {border-bottom: none;}

li .current {
text-decoration:none;
}

li .sub {
/* text-align:right; */
list-style:none;
font: normal 0.8em arial,sans-serif;
margin-left:-2em;
}

HTML:

 <ul id=“main“>
<li><a href=“#“>Menü</a></li>

<li><a href=“#“>Submenü 1</a></li>
<li><a href=“#“>Submenü 2</a></li>
<li><a href=“#“>Submenü 3</a></li>
<li><a href=“#“>Submenü 4</a></li>
<li><a href=“#“>Submenü 5</a></li>
<li><a href=“#“>Submenü 6</a></li>
<li class=“current“><a href=“#“>Submenü 7</a>
<ul>
<li class=“sub“><a href=“#“>aktives Detail 1</a></li>
<li class=“sub“><a href=“#“>aktives Detail 2</a></li>
<li class=“sub“><a href=“#“>aktives Detail 3</a></li>
<li class=“sub“><a href=“#“>aktives Detail 4</a></li>
<li class=“sub“><a href=“#“>aktives Detail 5</a></li>
</ul>
</li>

</ul>

Vielen Dank an alle für den Input.

Dieser Beitrag wurde unter Persönlich, Software, www veröffentlicht. Setze ein Lesezeichen auf den Permalink.

18 Antworten zu Internet Explorer Bug in CSS bei Listen und Überschriften

  1. Thrillhouse schreibt:

    Mal so probiert?

    Menü n
    Submenü 1
    Detail_1
    Detail_2
    Detail_n

    Submenü 2
    Detail_1
    Detail_2
    Detail_n
    Submenü n

    Oder is das für dich was ganz anderes?

  2. Thrillhouse schreibt:

    war ja klar, das das nix wird. Hier das Bild: http://img524.imageshack.us/img524/8347/unbenanntau0.jpg

    Denke mal, dass der IE ähnlich wie word einfach selbst versucht zu nummerieren.

  3. Ghost Dog schreibt:

    Alles schon probiert. Da schneidet er die erste ul weg und legt die zweite darüber. Denn ich habe die Maße und Position der Box ja genau definiert.

  4. Claas schreibt:

    Hab zwar gerade nicht so viel Zeit mir das Problem genauer anzusehen, aber ich glaube in diesem Eintrag (oder in den Kommentaren) gibt es dafür einen Workaround: http://clagnut.com/blog/348/

  5. CHESHiRE schreibt:

    Ich glaube mal gelesen zu haben, dass die Überschriften-Tags, also h1 bis h6 rausfallen sollen. Als Ersatz gibt’s ja dann -Bereiche, denen ja dann eine bestimmte Schriftgröße über Klassen oder vielleicht sogar IDs zugeordnet werden kann. ID macht sich hier aber schlecht.

    Man kann auch direkt dem Listenelement eine Klasse zuweisen.

    Grundlegend musst du die Überschriften sowieso in ein Listen-Element betten.

    Ich hab’s mal auf die Schnelle folgendermaßen gemacht:

    CSS (einfach nur einen Punkt vor h1/h2):

    ul#navi .h1 {
    font:bold 1em arial,sans-serif;
    }

    ul#navi .h2 {
    font:normal 1em arial,sans-serif;
    margin: 1em 0 0 0;
    }

    HTML (eckige Klammern bitte (natürlich) durch spitze Klammern ersetzen):

    [ul id=“navi“]
    [li class=“h1″]Menü n[/li]
    [li class=“h2″]Submenü 1[/li]
    [li]Detail_1 [/li]
    [li]Detail_2 [/li]
    [li]Detail_n [/li]
    [li class=“h2″]Submenü 2[/li]
    [li]Detail_1 [/li]
    [li]Detail_2 [/li]
    [li]Detail_n [/li]
    [li class=“h2″]Submenü n[/li]
    [/ul]

    Ich hab sonst nix weiter gemacht, aber sowohl in FF als auch in IE (auf Arbeit hab ich den 6er) ist das irgendwie alles zentriert, obwohl es bei deinem Screenshot nicht so ist.

  6. CHESHiRE schreibt:

    Nachtrag. Merke gerade: wenn du mein Schnipsel ausprobieren willst, dann musst du auch nochmal über die Gänsefüßchen gehen. WordPress formatiert die ja. Bin auch drüber gestolpert, weil ich einfach kopiert habe und das ID-Attribut (Navi) mit diesen formatierten Zeichen versehen war und mich dann drüber wunderte, dass einige meiner Änderungen nix bewirkten.

  7. Claas schreibt:

    Das sieht dann zwar richtig aus, allerdings ist ja der Sinn verfälscht. li class=h1 ersetzt ja nicht wirklich das echte h1.

  8. Georg schreibt:

    also ich würde ja sagen rein von der Logik müsste das html so gestaltet sein (runde klammern durch eckige ersetzen)

    (ul)
    (h1)Menu(/h1)
    (ul)
    (h2)Submenu(/h1)
    (li)
    (li)
    (li)
    (li)
    (/ul)
    (ul)
    (h2)Submenu(/h1)
    (li)
    (li)
    (li)
    (li)
    (/ul)
    (ul)
    (h2)Submenu(/h1)
    (li)
    (li)
    (li)
    (li)
    (/ul)
    (/ul)

    denn das Hauptmenu ist eine Liste die jeweils aus Unterlisten besteht. Das CSS musst du nur anpassen, dann sollte es funktionieren.

  9. Kittyluka schreibt:

    „Und wie kann ich eigentlich bei Listen mit CSS einen Strich (”-”) vor die Aufzählung setzen? Und wie kann ich testen, wie die Seite in IE 6 aussieht?“

    Für Striche gibt es glaub ich keine definition… vielleicht machst du es einfach mit list-style-image.

    Und um sich das mal im alten anzusehen gibt es Browser Emulatoren.
    der scheint ganz ok zu sein: http://browsershots.org/
    Runterladen kann man sich sowas auch, das Problem ist da nur, dass man sich da nie drauf verlassen kann, weil man nie weiß welche Bibliotheken der 6er nun nimmt. Habs ausprobiert, der zeigt da sachen an, die er eigentlich gar nicht verstehen dürfte.

  10. Kittyluka schreibt:

    ok vergiss die browsershots wieder… die brauchen zu lange.

    Warte bis Montag, da kann ich dir einen richtig guten geben.

  11. Ghost Dog schreibt:

    @Kittyluka: Vielen Dank für Deine Mail! Es klappt!

    Ich habe jetzt für den Navibereich einen eigenen Container eingerichtet, in dem die Liste steht. Und jetzt funktioniert es. Eine id darf nicht mehr als einem Objekt zugeordnet werden – das war mein Fehler.

    Ich ziehe also das mit dem IE-Bug zurück. Es war ein „Programmierer“-Bug.

  12. Thrillhouse schreibt:

    Da fällt mir der kluge Spruch eines Systemadministrators ein:
    „95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhllehne.“

  13. Ghost Dog schreibt:

    Ich ziehe alles zurück! Geht doch nicht. Die späte Stunde ist schuld daran, dass ich so matschig inner Birne bin. Ich hab die Änderungen vorgenommen und sie die ganze Zeit im Firefox getestet, wo es ja sowieso funktioniert hatte. Dummes kleines Ghost Dog.

    @class: Danke für den Link, aber die Seite hatte ich vorher schon von oben bis unten studiert. Die Größenangaben köennen es also entweder nicht sein, oder ich habe irgendeine Kombination vergessen.

    @CHESHiRE: Mit der Class geht es auch nicht.

    @Georg: Die Überschriften h1 und h2 sollen keine Listenelemente sein.

    Die Schriftgröße global auf 100.01% zu skalieren, hat auch nicht geholfen. Kann es vielleicht am Doctype liegen? Davon habe ich absolut keine Ahnung und ich habe den Doctype 1:1 aus einem Tutorial kopiert. Kann „loose“ oder „strict“ etwas damit zu tun haben?

  14. noname schreibt:

    Versuchs doch mal damit:

    (h1)Menü(/h1)
    (h2)1. Submenü(/h2)

    (ul)
    (li)(/li)
    (li)(/li)
    (li)(/li)
    (/ul)

    (h2)2. Submenü(/h2)

    (ul)
    (li)(/li)
    (li)(/li)
    (li)(/li)
    (/ul)

    usw… (runde klammern durch eckige ersetzen)

    dann ist es nämlich auch XHTML valide.

  15. noname schreibt:

    upps, ich meinte natürlich spitze klammern^^

  16. Ghost Dog schreibt:

    Wenn ich zwei ul daraus mache, schreibt sich die zweite ul über die erste. Denn ich habe im CSS-Teil der ul eine feste Position zugeordnet.

  17. noname schreibt:

    du kannst die 2 ul in eine div-box rein tun und dann die div-box fest positionieren.

    [div id=“submenu“]
    [h2][/h2]
    [ul]
    [li][/li]
    [li][/li]
    [/ul]

    [h2][/h2]
    [ul]
    [li][/li]
    [li][/li]
    [/ul]
    [/div]

  18. Ghost Dog schreibt:

    Nachtrag im Beitrag. Ich habe eine Lösung gefunden.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s