nicht angemeldet
IE6 Box Model Bug tritt unerklaerlicherweise auf
Servus,
ich habe folgenden HTML/CSS Code (siehe unten, per copy&paste zum Testen, da ganzer CSS-Code dabei ist).
Es stellt ein Menue dar mit einem Hauptmenueteil mit drei Eintragen, wovon der dritte aus einem Untermenue mit zwei weiteren Eintraegen besteht (ich habe alles HTML/CSS unnoetige rausgeworfen).
Das Untermenue sollte GENAU rechts neben dem Hauptmenueteil positioniert sein, und in FF, Opera, Safari und IE7 is das auch so, nur der IE6 will nicht - er zeichnet das Untermenue 25px zu weit rechts ... wohl wegen dem Box Modell Bug, da die Menueeintraege ein left-padding von 25px haben, dass der IE falsch behandelt.
Dass der Fehler im Quirks-Mode auftritt ist klar, aber in dem bin ich nicht!
FF sagt "Standardkonformer Modus", document.compat sagt "CSS1Compat" in jedem Browser, auch im IE6 und der W3C Validator sagt "This Page Is Valid HTML 4.01 Transitional!".
Wer weiss wieso's hier Probleme gibt mit dem IE6?
Danke sehr!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
IE6 Box Model Bug
</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
border: none;
outline: none;
text-decoration: none;
font-weight: 100;
}
.menu
{
position: absolute;
top: 100px;
left: 100px;
border: solid 1px black;
width: 150px;
}
.submenu
{
left: 150px;
top: 2px;
}
.menu_entry
{
position: relative;
}
.menu .menu_entry
{
padding: 4px 3px 4px 25px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu_entry">
entry1
</li>
<li class="menu_entry">
entry2
</li>
<li class="menu_entry">
entry3
<ul class="menu submenu">
<li class="menu_entry">
entry 3.1
</li>
<li class="menu_entry">
entry 3.12
</li>
</ul>
</li>
</ul>
</body>
</html>
-
Also deinen MSIE 6 Quanten-Murks kann ich nicht kommentieren, weil ich MSIE 6 nicht kenne.
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
border: none;Scheint sehr verbreitet zu sein, Defaultwerte herzustellen, um dann alles neu zu definieren.
Hierbei wird gerne vergessen, dass 'alles' in diesem Falle dem Autoren nicht verfügbar ist, und du damit eine sauberr Gestaltung von Selectboxen etc definitiv verschossen hast.
Ich würde das zurücksetzen Von Formularelementen tunlichst lassen, oder du wirst dir das hinterste und letzte Betriebssystem installieren müssen, um das kontrolliert wieder mit vernünftigen Werten zu versehen.mfg Beat
-
Danke!
Aber der Box-Modelll Bug tritt laut meiner Quellen (u.a. http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug) im IE6 NICHT auf, es sei denn er wird im Quirks Mode betrieben - in dem bin ich aber wie oben beschrieben eigentlich nicht (soweit ich das beurteilen kann, siehe oben).
Daher kann ich mir den Bug nicht erklaeren.
"hättest du zu Testzwecken alles auf 0 belassen hättest du den Fehler gesehen."
Eben, er duerft NICHT auftreten.
Kann mir da wer weiterhelfen ...
Danke
-
Hi,
is wohl nicht der klassische Box Model Bug, sondern ein anderer (behaupte ich einfach mal so) ...
Ich habe eine absolute positionierte <ul> in einem relativ positionierten <li> (es is ein css-hover Menue, falls sich wer fragt was der Schmarrn soll), Quellcode siehe unten.
Das beinhaltende <li> hat ein padding definitert, und nur der IE6 errechnet beim beinhalteten auf left=0 und top=0 absolut positionierten <ul> das padding des Elters mit ein, allerdings nur bei left, bei top nicht.
ul.computed.left waere also ul.style.left + parent.padding, beim IE6 ...
top von <ul> ist korrekt.Ein Loesung ausser conditional comments oder haesslichen Hacks is mir nicht eingefallen, aber ich dachte ich poste es trotzdem mal ...
Wer eine feine Loesung hat, der darf sie mir gerne sagen ...
Danke & Servus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
IE6 Bug
</title>
</head>
<body>
<ul style="background-color:green; margin:0px; position:absolute; top:0px; left:0px; width:200px; padding:0px; border:0px solid green">
<li style="padding:3px; margin:0px; position:relative;"">
outerBox
<ul style="background-color:yellow; margin:0px; position:absolute; top:0px; left:0px; width:200px; padding:0px; border:0px solid black">
<li>
innerBox
</li>
</ul>
</li>
</ul>
</body>
</html>
-
-
-
hi,
Wer weiss wieso's hier Probleme gibt mit dem IE6?
Das sagst du doch schon selbst, ein Box Model Bug.
.menu .menu_entry
{
padding: 4px 3px 4px 25px;
}hättest du zu Testzwecken alles auf 0 belassen hättest du den Fehler gesehen.
grüße