Problem mit CSS-Layout

[slowrider72]

Morgähn Leute!

Ich experimentiere gerade mit einem neuen reinen CSS-Layout für meine Homepage.

Dabei tritt im IE6 das Problem auf, dass der ganze Block mit der Navi bei "hover" um ca. 2 Pixel nach rechts "springt". Das passiert nur, wenn ich im a:hover eine Hintergrundfarbe definiere und nach einem Reload steht der Block wieder etwa 2px weiter links.

Mein HTML-Code und CSS sind validiert.

Vielleicht hat jemand den entscheidenden Denkanstoss für mich; ich kann einfach keinen Fehler mehr finden oder sitze irgendwie auf der Leitung

Danke schon mal im Voraus!

Grüße,
Dietmar

[slowrider72]

Hallo!

Ich versuche mal, das Problem präziser zu beschreiben:

Wenn der Mauszeiger einen Link berührt, bewegt sich der schwarz umrandete Navigationsblock um ca. 2 Pixel nach rechts an den Rand.

Der Effekt kommt nur im IE6 vor. Ich habe auch in NS6, Mozilla 1.4 und Firebird 0.7 getestet, da stimmt die Positionierung. Weiters tritt das Problem auch nur auf, wenn ich im Pseudoformat a:hover eine Hintergrundfarbe definiere.

Ich kann keinen Zusammenhang finden zwischen der Farbangabe und dem Verschieben des Containers. Versuche ohne Rahmen brachten auch nicht, dass der Container richtig positioniert wird.

Vielleicht hat einer der CSS-Gurus hier im Forum einen Denkanstoss, wo der Fehler sitzen könnte?

Schöne Grüße,
Dietmar

[prefix]

hi

ersetz mal deine beiden definitionen zu navi1 wie folgt:

#navi1 a:link; #navi1 a:visited {
	color: #f90;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	display: block;
	text-decoration: none;
}

#navi1 a:hover, #navi1 a:active {
	color: #039;
	background-color: #eee;
	padding: 4px 10px;
}

[slowrider72]

Sers Joachim!

Danke für deinen Hinweis. Beim Schreiben der Pseudoformate war ich wohl ein wenig schlampig...

Allerdings, der Block "springt" immer noch nach rechts, das wars leider nicht. Ich habe herausgefunden, dass alles passt, wenn ich den margin im container von Prozenten auf fixe Angabe setze (so schauts aus) . Wie hängt das zusammen, dass check ich irgendwie nicht

#container {
margin: 20px 10%;
background-color: #fff;
border: 1px solid #f90;
}

LG,
Dietmar