Doppelte Anzeige im IE6

Azurite · #1 (**permalink**) 09.03.2009, 12:33

Hallo!

Ich habe ein Template für Typo3 gemacht, bei dem soweit auch alles funktioniert, nur wird im IE6 die oberste Grafik des Wrappers doppelt angezeigt: Hier ein Beispiel

Bisher schaut das CSS für dieses Element und das Elternelement so aus:

Code:

#wrapper {
	width:950px;
	z-index:2;
	position:relative;
	top:15px;
	height:auto;
	bottom:0;
}

#wrapper-top {
	height:10px;
	width:950px;
	top:0;
	background-image: url(../images/wrapper_top.png);
}

Was muss ich hier für den IE6 noch ändern, damit diese doppelte Anzeige verschwindet?

Das nächste kleine Problem wäre die PNG-Transparenz, aber das ist erstmal zweitrangig.

Wäre schön, wenn mir jemand helfen kann.

Danke,
Azurite

aboleo · #2 (**permalink**) 09.03.2009, 13:29

Indem du dem entsprechendem Container ein die wiederholung verbietest:

Code:

#wrapper-top {
	height:10px;
	width:950px;
	top:0;
	background-image: url(../images/wrapper_top.png) no-repeat;
}

Aber zieh doch lieber mit in den IE death march

Azurite · #3 (**permalink**) 09.03.2009, 13:48

Hab ich gerade versucht, aber dann wird mir das Hintergrundbild gar nicht mehr angezeigt. Auch nicht, wenn ich background-position:top setze.

Sollte es die doppelte Anzeige dennoch nur am repeat liegen, dann würde das ja heißen, dass dieser div im IE doppelt so hoch angezeigt wird, also 20 statt 10px.

Wie kann ich denn das korrigieren?

Danke trotzdem für die Antwort.

LG
Azurite

PS: Ich wär echt froh drüber, wenn der IE6 endlich in Vergessenheit gerät.
Leider hab ich trotzdem den Auftrag, dass das Template dafür auch noch passt.

aboleo · #4 (**permalink**) 09.03.2009, 14:38

Also wenn ich mir deinen Quellcode lokal abspeicher, so wie er da steht und dann zusaetzlich ueber CC die Beiden Regeln ( background-repeat: no-repeat; -bzw. background-position: 0 10px; ) ueberschreib, dann passt das soweit.

Azurite · #5 (**permalink**) 09.03.2009, 15:11

Ok, habe verstanden... jetzt funktioniert es im IE6, nur sonst nirgendwo.
Also dann einfach eine Unterscheidung reinhauen.

Danke für deine Hilfe!

Reynhard B. · #6 (**permalink**) 09.03.2009, 17:21

Zitat:

Zitat von aboleo

Code:

#wrapper-top {
	height:10px;
	width:950px;
	top:0;
	background-image: url(../images/wrapper_top.png) no-repeat;
}

Habe mir die ganze Sache nicht wirklich angesehen, aber

Code:

background-image: url(../images/wrapper_top.png) no-repeat;

stimmt so nicht.
Bei einer Kurzschreibweise muß das "-image" weg, also:

Code:

background: url(../images/wrapper_top.png) no-repeat;

Azurite · #7 (**permalink**) 09.03.2009, 17:31

Danke, aber ich habe es wegen der Browserunterscheidung eh nicht in Kurzschreibweise notiert, sondern einfach darunter

Code:

#wrapper-top {
	height:10px;
	width:950px;
	top:0;
	background-image: url(../images/wrapper_top.png);
	_background-repeat: no-repeat; 
	_background-position: 0 10px;
}

so drangehängt.

Jetzt ist nur noch der Abstand nach oben zum Menübalken hin im IE6 doppelt so groß wie in den anderen Browsern. Wäre jetzt kein Weltuntergang, aber wenn jemand zufällig weiß, woran das liegt, wäre das auch nett.

LG Azurite

fricca · #8 (**permalink**) 09.03.2009, 17:35

Die eigentliche Ursache des Problems ist die 10-Pixel-Höhe, die vom IE < 7 nicht eingehalten wird. font-size:0 hilft.
Das background-Gehacke ist dann unnötig.

Azurite · #9 (**permalink**) 11.03.2009, 11:31

Das klappt bestens, vielen Dank!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Falsche anzeige im IE6	slack1982	CSS	19	23.09.2006 14:15
Imagemap Problem - Doppelte Anzeige im IE	nevermind	CSS	10	17.07.2006 21:38
IE6 verkleinert Anzeige bei mouseover von Links	Thies	CSS	1	19.10.2005 00:22
html/css: anzeige problem - ie6 - online anders als offline?	braindead	CSS	1	24.09.2003 16:01