✔ The IE5/6 Doubled Float-Margin Bug again?

[coolfire2000]

Hi Leute ich hätt da gern mal ein Problem:

ich hab folgende Seite:

http://www.easytechnologies.de/csstest

mit folgendem Stylesheet:

http://www.easytechnologies.de/csstest/default.css

das Problem befindet sich wohl im

/* Header */

#header {
width: 760px;
height: 82px;
margin: 0 auto;
background: url(images/img02_new2.jpg);
}


Schaut euch die Grafik in der Headline mal im IE 6 und im IE 7 an, hab mir auch schon verschiedene Lösungen dazu ergoogelt, allerdings nix brauchbares, die Königslösung in den CSS

display: inline;

einzufügen hat nicht richtig funktioniert, evtl. weiss einer von euch weiter?

Würde mich freuen!

C.

 

[Maik]

Hi,

hier liegt überhaupt kein "Doubled Float-Margin"-Bug vor, denn dieser wirkt sich nur auf horizontaler Achse aus, indem der Wert einer margin-left oder margin-right-Deklaration verdoppelt wird. Dies ist hier aber nicht der Fall, und folglich zeigt hier display:inline auch keine Wirkung.

Erweiter stattdessen die Regel für #header mit overflow:hidden, damit der IE6 diesen Bereich wegen der beiden eingebundenen Überschriftenelemente in der Vertikalen nicht vergrößert, und aufgrund dessen das Hintergrundbild zweimal darstellt.

Ansonsten solltest du mal die Höhenangabe für #header auf die oberen Innenabstände der beiden Überschriftenelemente aufeinander abstimmen, oder umgekehrt, denn diese drei Regeln ergeben so "rechnerisch" wenig Sinn, und sind die Ursache für die Fehldarstellung im IE6:

#header {
	width: 760px;
	height: 82px;
	margin: 0 auto;
	background: url(images/img02_new2.jpg);
}


#header h1 {
	float: left;
	padding: 120px 0 0 20px; /* Innenabstand oben - rechts - unten - links */
	font-size: 36px;
}

#header h2 {
	float: right;
	padding: 134px 20px 0 0; /* Innenabstand oben - rechts - unten - links */
	font-size: 22px;
}

mfg Maik

 

[coolfire2000]

datt wars, dank dir vielmals