IE6 Bug bei Breite von Links in ul

[halla]

Hallo,

ich befürchte ich mal wieder auf irgendeinen tollen CSS Bug im MSIE gestoßen
(wiso gibts hier eigentlich kein Emoticon das sich erbricht? Oder sich mit einem Brett geißelt o.ä.?)

Geht mal bitte mit dem MSIE6 auf diese Seite:
http://halla.homelinux.net/
Dann einfach mal mit der Maus über die Links auf der linken Seite fahren.
Beim überfahren des ersten Links wird die gesamte Spalte ein Pixel breiter.
Überfahrt man anschließen mit der Maus wieder "Artikel" oder "Autor" in der Horizontalen Navi, wird die linke Spalte wieder ein Pixel schmaler. Dann wieder einen Link in der linken Spalte überfahren -> Spalte wird ein Pixel breiter. Wieder über "Artikel" -> Box wird ein Pixel schmaler usw.... Das könnte ich den ganzen Abend lang machen Ich dreh noch durch.

Hat jemand eine Idee, was da schon wieder los sein könnte?

Die Klassen für die Links in der linken Spalte sind eigentlich ganz einfach aufgebaut:

#sidebar a:link, #sidebar a:visited {
    display: block;
    margin:0;
    padding:0;    
    padding-right:2%;
    width: 98%;
    text-decoration: none;
    color: #FAF2CE;
}
#sidebar a:hover, #mainnavi a:active	 {
    background-color: #1C0000;
}

Vielen Dank für jede Hilfe,
Grüße,
Daniel

[steffenk]

Das Problem sind %-Angaben.
Das ist grundsätzlich für jeden Browser schwer zu berechnen - 98% von welcher Breite ?

Da es sich um ein fixes Menü handelt, vergib auch eine absolute Breite. Der Rest floatet doch sowieso wie Platz ist.

[halla]

Hi Steffen,

die linke Spalte #sidebar hat eine Breite von 17% und ist keineswegs fix:

#sidebar {
    font-size: 0.8em;
    text-align: center;
    width: 17%;
    text-align: right;
    margin-top:20px;
    position:absolute;
}

Daher auch die %-Angaben bei der Breite der Links.
Eben 100% der Breite des übergeordneten Elements.
Gebe ich keine Breite an und lass auch das padding-right für den Abstand zum Rand weg, kommt der IE damit gar nicht zurecht und haut mir Riesenabstände zwischen die Listenpunkte - mal ganz davon abgesehen, daß das oben beschriebene 1px-Problem noch immer besteht.

Ich denke also nicht, daß es daran liegt...
Vermute eher mal es hat mit irgendeiner Border was zu tun, aber ich verstehe nicht woran... und vorallem: Was soll diese merkwürdige "Interaktion" mit dem Hauptmenue (#mainnavi)?

Das hier ist übrigens der gesamte CSS Code aller Elemente, die in der linken Navi "verbaut" sind:

#sidebar {
    font-size: 0.8em;
    text-align: center;
    width: 17%;
    text-align: right;
    margin-top:20px;
    position:absolute;
}
#sidebar h2	{
    background-color: #8A0000;
    border: 1px solid #1C0000;
    border-bottom: 1px solid #FAF2CE;
    color: #FAF2CE;
    font-size: 1.2em;
    font-weight: bold;
  	 margin: 0 0 0 3px;
    padding-right: 5px;
    background: url(/wp-content/themes/ontherocks/images/bg/rot_grunge_small.gif);
}
#sidebar ul {
    background-color: #BAA988;
    margin: 0;
    padding: 0;
    border: 1px solid #1C0000;
    border-top:none;
  	margin: 0 0 10px 3px;
}
#sidebar li	{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidebarlist	{
    border:none !important;
    background-color:#FAF2CE !important;
}
#sidebar a:link, #sidebar a:visited {
    display: block;
    padding-right:2%;
    width: 98%;    
    margin:0;
    padding:0;    
    text-decoration: none;
    color: #FAF2CE;
}
#sidebar a:hover, #mainnavi a:active	 {
    background-color: #1C0000;
}

Grüße,
Daniel

[rewboss]

Zitat von St@eff.en

Das ist grundsätzlich für jeden Browser schwer zu berechnen - 98% von welcher Breite ?

Allerdings gibt es ein Verfahren, das alle andere Browser verwenden, um die Margins gleich beim ersten Mal richtig zu berechnen -- nur Internet Explorer verwendet dieses Verfahren nicht. Leider weiß keiner -- außer irgendein Software-Entwickler bei Microsoft -- was genau für ein Verfahren IE eigentlich verwendet.

Eine sowohl lustige als auch verblüffende Demonstration dieses Bugs gibt's hier.

halla, es hat wirklich mit den Prozentangaben des Paddings zu tun. Es ist ein bekanntes Bug im Internet Explorer.

[halla]

Zitat von rewboss

halla, es hat wirklich mit den Prozentangaben des Paddings zu tun. Es ist ein bekanntes Bug im Internet Explorer.

Mit anderen Worten: Da der MSIE nicht in der Lage ist, 98 und 2 zu addieren, ist es faktisch unmöglich auf die Art passgenaue, fluide Layouts zu machen? Das darf ja wohl nicht wahr sein, oder?

Ich meine, was soll das denn bitte sein? Jahrelang heißt es "Web ist nicht Print - Verzichtet auf pixelgenaue Layouts, nutzt die Möglichkeit, Bildschirmfüllende Layouts zu erstellen". Und dann darf man doch wieder blöde Streifenlayouts machen?

Das frustet. Und zwar gewaltig.

Trotzdem Danke....

[steffenk]

es geht nicht darum 98 und 2 zusammenzuzählen.

Um 17% Breite zu berechnen, muss der IE wissen, wie breit alles wird (unzwar in pixel)
Erst dann kann er 17% davon berechnen.

Der IE hat aber die Eigenschaft, sofort etwas darzustellen, sobald die Informationen vorliegen, während Firefox erst wartet, bis er die gesamte Seite eingelesen hat.
Dadurch berechnet der IE die 17% vom gesamten Viewpoint - und das ist im Endeffekt nicht der korrekte Wert.

Sobald Du in Pixelgrössen arbeitest, ist das aber kein Problem.

[rewboss]

Zitat von St@eff.en

Der IE hat aber die Eigenschaft, sofort etwas darzustellen, sobald die Informationen vorliegen, während Firefox erst wartet, bis er die gesamte Seite eingelesen hat.

Nee, das ist es nicht, sonst würde Firefox Otto Normalverbraucher viel zu langsam vorkommen. Die Eigenschaft, die Explorer hat, ist, Container fälschlicherweise auszudehnen, wenn der Inhalt dafür zu groß ist. Vermutlich (niemand weiß genau) hängt es damit zusammen. Es dürfte aber viel komplizierter sein als das.

Komischerweise passiert das nicht im Quirks-Modus. Versetzt man den Explorer in Quirks-Modus kommt dieses Bug nicht mehr vor -- dafür aber eine Reihe andere.