XHTML 1 Strict - Boxmodel erst nach a:hover korrekt

[philipp]

Hi

Ein sehr merkwürdiges Problem habe ich zur Zeit bei einem Privatprojekt. Das Box Model funktioniert im INTERNET EXPLORER erst nach dem ersten Hover im Content Bereich richtig (Das Problem tritt nur bei den 2/3 Spaltigen Textblöcken auf):

Seht es euch einfach an: Tigers

Mir wäre wirklich sehr geholfen...

 

[koslowski]

Moin,

was hat den das zu bedeuten:

ul.navi1 a {
	font-variant:small-caps;
	font-size:15em;
	line-height:1.2em;
	text-decoration:none;
	background:inherit;
	color:#000;
	line-height:1.4em;
	padding:0 0.2em 0 0.75em;
	border-bottom:thin solid #000;
	display:block;
	}

font-size:15em;

Wenn du das in font-size:1em; änderst siehts gleich besser aus

koslowski

 

[philipp]

Und was hat das mit meinem Problem zu tun?

Kennt niemand diesen Bug? Wie kann ich ihn umgehen?

 

[koslowski]

Mahlzeit,

Und was hat das mit meinem Problem zu tun?
Kennt niemand diesen Bug? Wie kann ich ihn umgehen?

ist lediglich ein Fehler der mir aufgefallen ist, aber bitte gern geschehen.:razz:

Zu deinem Fehler kann ich nur sagen das der IE6 oft Probleme mit %-Angaben für padding/margin hat.
Außerdem würde ich mal nach "Double-Float-Margin-Bug" googeln.
Könnte eine Abart davon sein.

Hab aber leider keine Zeit mir das näher anzusehen.

 

[philipp]

Tja, tut mir leid, habe vergessen mich zu bedanken, war sehr im Stress.

Ich glaube nicht, dass ich diesen Float-Bug habe.
Seltsam ist nur, dass nach einem Mouse-over (link) im Content Bereich alles passt.

Ich kann auch über Google keine Problemlösung finden.

Naja, vielleicht kommt ja doch noch jemand vorbei, der eine Lösungsidee hat.

edit: Scheint doch das Problem mit Double-Float-Margin-Bug zu sein, mal sehen, ob das heute noch etwas wird.

 

[neuroleptika]

Wie der Bug heißt, und ob es einer ist, weiß ich nicht.
Ich konnte auch kein Problem im IE7 erkennen.
Im IE6 wird die dritte Spalte zunächst nach unten verschoben.
hast du schon mal versucht mit diesem width-Wert zu spielen:

div#contentblock {    
width:44em;
 float:left;
 margin-bottom:1em;
}

Rundungfehler treten bei em-Angaben meines Wissens nicht auf.
Aber ein Versuch ist es Wert.
Was passiert denn wenn du dieses width verkleinerst?.

Was deine Reaktion auf die Bemerkung zu der font-size-Angabe im a-Tag betrifft:
Es ist normal, daß man sich bei einem hover-Problem im IE6 als erstes die a-Tags ansieht.
15em ist ja kein lächerlicher Wert.

Oder geb mal für alle Elemente innerhalb von div#contentblock unterschiedliche background-color vielleicht springt im IE6 eins aus dem Rahmen.

 

[philipp]

Danke für deine Hilfe.

Die 15em hatten den Grund:
Die Navigationsliste hat im Internet Explorer einen Fehler, und zwar wurden alle Listenpunkte mit Margin-top angezeigt, wo keiner ist. Genau eine Line-height. Also hatte ich zunächst die Font-size für die Listenpunkte auf einen minimalen Wert gesetzt. Um die Links aber lesbar zu haben musste ich für den a Tag die Font-size auf einen entsprechend hohen Wert setzen.

Nachdem ich aber dem A Tag zu display:block auch noch eine Insgesamtbreite von 100% gab wurde dieser mysteriöse Margin-top nicht mehr angezeigt...

Zum ursprünglichen Problem:
Es handelte sich dabei wohl um diesen Bug:
Quirky percentages in IE6's visual formatting model

Durch ein platzieren eines weiteren Div-Containers innerhalb des #contentblock-Div-Containers mit 100% Breite konnte ich das Problem beheben.

 

[neuroleptika]

...und zwar wurden alle Listenpunkte mit Margin-top angezeigt, wo keiner ist. Genau eine Line-height..

Also dieser komische vertikale Abstand zwischen li's wenn ein a-Tag enthalten ist?
Dieser Bug hat auch einen Namen (fällt mir leider nicht ein)
Ich weiß nicht ob das richtig mache:

ul li {
display: inline;
}
ul li a {
display: block;
}

Dann ist der Abstand im IE6 jedenfalls immer weg und die Liste bleibt vertikal.

 

[koslowski]

Hi,

Also dieser komische vertikale Abstand zwischen li's wenn ein a-Tag enthalten ist?
Dieser Bug hat auch einen Namen (fällt mir leider nicht ein)
Ich weiß nicht ob das richtig mache:

ul li {
display: inline;
}
ul li a {
display: block;
}

Dann ist der Abstand im IE6 jedenfalls immer weg und die Liste bleibt vertikal.

das ist der Whitespace-Bug der durch die Zeilenumbrüche im Quelltext hervorgerufen wird.
Behoben wird er indem a Layout bekommt:

* html #navi a,
* html #navi strong  { height:1px; }

<strong> hab ich mal mit einbezogen falls man es verwendet damit die Links der aktuellen Seite nicht auf sich selber zeigen.

Du hast a ja width gegeben was den gleichen Zweck erfüllt.

Zitat von Philipp:
Zum ursprünglichen Problem:
Es handelte sich dabei wohl um diesen Bug:
Quirky percentages in IE6's visual formatting model

da hab ich auch einen Moment gezuckt, aber dann gedacht das er das nicht ist.

Da die Container die gleiche Hintergrundfarbe haben, hätte ich versuchsweise mal margin gegen padding ausgetauscht, um zu sehen obs dann weg ist.
Hätte vielleicht auch bei dem Bug geholfen den du vermutet hast, hab ich aber nicht getestet.

koslowski