IE6 macht mich wahnsinnig, DIVs zu groß

DieTa · 23.03.2007

Hallo,

um mein Projekt etwas moderner zu gestalten, hab ich das Design komplett erneuert und endlich damit begonnen auf Webstandards zu setzen. Ich verwende XHTML 1.1 und mein Code ist laut dem W3C-Validator auch "valid". Ebenso verhält es sich mit dem CSS.

Mein Problem ist nun, dass die Seite wunderbar in eigentlich allen Browsern läuft bis auf - wie könnte es auch anders sein - dem IE6.

Die DIVs werden zu groß angezeigt und wurden wiederholt. Das wiederholen konnte ich dem CSS abgewöhnen, aber die Abstände zwischen einem DIV und dem anderen bekomme ich nicht weg.

Hier mal der Code einer dieser Fälle:

HTML:

.headertop
	{
		margin-top			: 20px;
		background-image 	: url(images/top-top.png);
		background-repeat 	: no-repeat;
		width				: 708px;
		height				: 14px;
		text-align			: center;
		border-width		: 0px;
		padding 			: 0px;
		margin-bottom		: auto;
		margin-right 		: 0px;
		margin-left 		: 0px;
	}

Ich habe schon alles möglich durchprobiert (wie man sieht)...

Leider komme ich nicht drumherum einige DIVs ineinander zu schreiben, insgesamt bis zu 5 :-/

Code:

HTML:

[...]
<body>
<div class="wrapper">
<form action="upload/upload.php" method="post" enctype="multipart/form-data">
<div class="headertop"></div>
<div class="header">
[...]

Gruß
Dennis

lengsel · 23.03.2007

Hat zwar mit dem konkreten Problem nichts zu tun, hilft aber vielleicht trotzdem:
Wenn es nicht anders geht, serviere ich dem IE ein eigenes Stylesheet in denen eben andere Werte stehen als in dem Stylesheet für alle anderen Browser. Mit Conditional Comments lässt sich ganz entspannt ohne großen Aufwand eine Stylesheetweiche implementieren.

Grüße,
Flo

DieTa · 23.03.2007

lengsel schrieb:
Hat zwar mit dem konkreten Problem nichts zu tun, hilft aber vielleicht trotzdem:
Wenn es nicht anders geht, serviere ich dem IE ein eigenes Stylesheet in denen eben andere Werte stehen als in dem Stylesheet für alle anderen Browser. Mit Conditional Comments lässt sich ganz entspannt ohne großen Aufwand eine Stylesheetweiche implementieren.

Grüße,
Flo

Hi Flo,

danke für die Idee

Kleines Problem ist nur noch, ich bekomme es im IE gar nicht richtig angezeigt :-/ Über eine Browserweiche hatte ich alternativ auch schon nachgedacht...

Das Bild ist übrigens 708x14 Pixel groß..

heldausberlin · 23.03.2007

Wenn du vor deinen CSS-Klassen ein

PHP:

* html

setzt, dann kannst du sie extra für IE6 und IE5 neu definieren, ohne dass andere Browser ihre Darstellung verändern, da diese Tags dann nur von IE5+6 interpretiert werden.
So kannst du dann die Seite nochmal für IE anpassen.

Wenn du dann IE 5 extra machen willst, geht das mit

PHP:

html + body

vor dem jeweiligen Tag.

Also angenommen, du hast ein DIV für alle Browser definiert:

PHP:

#Feld {...}

Dann kannst du es für IE 5+6 ändern:

PHP:

#Feld {...}

*html #Feld {anders}

und anschließend für IE5, falls erforderlich, wieder rückgängig machen:

PHP:

#Feld {...}

*html #Feld {anders}

html + body #Feld {wieder normal}

So brauchst du nicht extra für jeden Browser ein eigenes Stylesheet entwerfen, sondern lediglich die fehlinterpretierten Klassen neu definieren.

DieTa · 23.03.2007

heldausberlin:
Ok das ist natürlich noch besser als 2 CSS-Files die man dann immer seperat pflegen muss.

Frage: Du hast das Feld mit "#" definiert? Was bedeutet #? Ich kenne bis dato nur Direktformatieren von

p {*} z.B.

oder

.text {*}

heldausberlin · 23.03.2007

#Feld ist eine einmalig verwendete Klasse, .Feld kann man beliebig oft verwenden.

In deinem Fall würde ich mit margin und padding etwas rumspielen, oder mal deine Seite verlinken, dann können wir uns das auch näher anschauen.
Es wird auf jeden Fall eine Lösung geben, die du so eben isoliert lösen kannst, ohne andere Browser (die sich korrekt verhalten) wieder zu belasten.

DieTa · 23.03.2007

Ok hier der Link zur Seite in Arbeit: http://www.spongedpics.com/index_2.php

Das Problem im IE6 ist halt das ich z.B. im DIV von "headertop" immer etwas Abstand zum unteren DIV habe und das absolut nicht rausbekomme.

Mit den Weichen zu arbeiten erleichtert das ganze ja schon beträchtlich.

lengsel · 23.03.2007

heldausberlin schrieb:
#Feld ist eine einmalig verwendete Klasse, .Feld kann man beliebig oft verwenden.

# ist keine Klasse sondern eine ID.
. ist eine Klasse

Noch ein Wort zur Übersichtlichkeit:
Sicherlich sind zwei CSS-Dateien kein allzu erstrebenswerter Zustand.
Ich habe es in der Praxis jedoch als sehr viel einfacher und übersichtlicher erlebt zwei verschiedene Dateien zu pflegen, als eine vollgeramschte.

Grüße,
Flo

Teichi · 23.03.2007

Oder anders gesagt, mit # spricht man id-Attribute an.

lengsel · 23.03.2007

DieTa schrieb:
...Das Problem im IE6 ist halt das ich z.B. im DIV von "headertop" immer etwas Abstand zum unteren DIV habe und das absolut nicht rausbekomme...

Rutsch doch das untere div mittels negativem top-margin nach oben.
z.B.:

Code:

margin: -20px 10px 5px 30px;

Abstände:
top: -20
right: 10
bottom: 5
left: 30

Sicher nicht die feine Art, aber funktioniert meistens.

Grüße,
Flo (kein Validierungsfreak)

heldausberlin · 23.03.2007

lengsel schrieb:
# ist keine Klasse sondern eine ID.
. ist eine Klasse

Du hast Recht. Immer diese Learning-by-Doing-HTMLler.

DieTa · 23.03.2007

@lengsel: Gute Idee!

Stimmt - die feine Englische ist es nicht, aber besser als "Futtsack" im IE zu haben.

Da zahlt sich die Nummer mit der Weiche aus.

Vielen Dank

DieTa · 23.03.2007

Hallo nochmal,

nach ziemlich viel "Bastelarbeit" habe ich die Ansicht im IE6 nun so, wie es sein soll. Leider musste ich noch mit Ebenen arbeiten, sprich z-index, position: absolute etc.

Was mir nun aufgefallen ist: Leider gehen die script.aculo.us-Funktionen (AJAX-Effekte) nun im IE gar nicht mehr. Ist das irgendwie wieder hinzubekommen?

Hier die relevanten Stellen aus dem CSS für die IE6:

HTML:

.eins
	{
		background-image	: url(images/one.png);
		width				: 660px;
		height				: 150px;
		background-repeat 	: no-repeat;
	}
	
.zwei
	{
		width				: 660px;
		height				: 150px;
		margin-top			: -42px;
	}

.zwei2
	{
		position 			: absolute;
		z-index				: 1;
		margin-left			: -330px;
		background-image	: url(images/two.png);
		background-repeat 	: no-repeat;
		width				: 660px;
		height				: 109px;
	}
	
.drei
	{
		width				: 660px;
		height				: 150px;
		margin-top			: -42px;
	}

.drei3
	{
		position 			: absolute;
		z-index				: 2;
		margin-left			: -330px;
		background-image	: url(images/three.png);
		background-repeat 	: no-repeat;
		width				: 660px;
		height				: 108px;
	}

Es liegt definitiv an den position: absolute; & z-index:1; -aber wie bekomme ich das ausgerichtet ohne damit zu arbeiten?

Ah! Die Kombination macht's - so geht es dann:

HTML:

.eins
	{
		background-image	: url(images/one.png);
		width				: 660px;
		height				: 150px;
		background-repeat 	: no-repeat;
	}
	
.zwei
	{
		width				: 660px;
		height				: 150px;
		margin-top			: -22px;
	}

.zwei2
	{
		background-image	: url(images/two.png);
		background-repeat 	: no-repeat;
		width				: 660px;
		height				: 109px;
	}
	
.drei
	{
		width				: 660px;
		height				: 150px;
		margin-top			: -22px;
	}

.drei3
	{
		background-image	: url(images/three.png);
		background-repeat 	: no-repeat;
		width				: 660px;
		height				: 108px;
	}

2nd · 23.03.2007

Warum immer alles so kompliziert mit 70 verschachtelten DIVs, Conditional Comments und 40 Hacks für einfache Sachen? Dann kann man sich die (Pseudo-)Standards auch schenken und mit Tabellen weitermachen

Der Internet Explorer 6.0 kann natürlich genauso wie alle anderen moderneren Browser DIVisions lückenfrei darstellen - solange er im Standard Mode via Doctype arbeitet.

Ich habe bei Dieta im Markup noch einige andere Dinge gesehen, die so nicht sein müssen:

• ein form-Tag direkt nach dem Wrapper?
• ein semantisch nicht korrektes Menu (Stichwort ungeordnete Liste)
• Inline Styles
• DIV-Suppe

So wie unten im Bsp. würde ich persönliche das grundsätzlich machen – es funktioniert auch (nur so als Grundgerüst) ohne Abstände und Tricks. Getestet unter X und XP, Safari, IE (6 + 7) und FF. Der Einfachheit halber liegen die CSS-Selektoren/Attribute im HTML-File. Unten gibt es das Teil als ZIP angehängt (falls mein Ansatz überhaupt interessant genug ist

). Da ul-Tags Blockelemente sind, könnte man ul aus dem DIV#navi rausnehmen und mit in den Header zun.

Reduktion auf das Wesentliche ist immer gut!

P. S.: Die distancebox ist übrigens dafür da, dass sich das zentrierte Layout nicht aus dem Browser links herausschiebt, wenn der Browser verschmälert wird. Also doch ein Trick drin. Simusch aus dem Forum sei Dank für diesen "Hack"

2nd

P.S.: Da das Forum diesen grossen Post mit dem Listing nicht anzeigen kann, gibt es die Datei nur verlinkt, sorry...

KAMiKAZOW · 23.03.2007

Kleine Zwischenfrage: Ist der IE6 überhaupt noch relevant? Schließlich wird der bei WinXP-Nutzern doch als „wichtiges Update“ zwangsinstalliert, oder?

2nd · 23.03.2007

Jo ist er, 50+ % nach wie vor:

http://marketshare.hitslink.com/report.aspx?qprid=6

2nd

DieTa · 23.03.2007

Hallo 2nd,

da hast Du Dir ja richtig mühe gegeben!

Klar kann man das so umsetzen, allerdings brauche ich bedingt durch die AJAX-Effekte (und die User stehen drauf) noch einige DIVs :/ Das dass noch nicht das Nonplusultra ist, weiß ich wohl.

Ich werde Deine Datei genau unter die Lupe nehmen und mir Notizen machen. Bis dato war ich auch der Ansicht, dass es ein Table "tut", aber dann wird man ja heute gevierteilt, wenn man das noch nutzt...

Danke auf jeden Fall

2nd · 23.03.2007

Mühe ist relativ

JS-Effekte musst Du nicht ausschliesslich auf DIVs anwenden, Du kannst jedes Block-Level Element dafür benutzen z. B..

Ich meinte aber eher auch solche Konstruktionen hier:

HTML:

			<div class="zwei">
				<div id="nr2" style=" display:none;">
				 	<div class="zwei2">
						<div class="inhalt">
							<p><input name="checkagb" type="checkbox" onclick="setTextVisible(this.checked);" /> 
							<input type="hidden" value="de" name="formsprache" class="textboxen" />
							<span class="schriftnormal">Ich habe die <a href='termsofuse.php' class='schriftnormal'>Nutzungsbedingungen</a> gelesen, verstanden und stimme diesen zu.</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>

Das sind 5 (!) Block-Level-Elemente, die im Wrapper/Content-Block stecken. Also ca. 7 insgesamt.

2nd

IE6 macht mich wahnsinnig, DIVs zu groß

DieTa

Aktives Mitglied

lengsel

Aktives Mitglied

DieTa

Aktives Mitglied

heldausberlin

Aktives Mitglied

DieTa

Aktives Mitglied

heldausberlin

Aktives Mitglied

DieTa

Aktives Mitglied

lengsel

Aktives Mitglied

Teichi

Aktives Mitglied

lengsel

Aktives Mitglied

heldausberlin

Aktives Mitglied

DieTa

Aktives Mitglied

DieTa

Aktives Mitglied

2nd

Aktives Mitglied

Anhänge

KAMiKAZOW

Aktives Mitglied

2nd

Aktives Mitglied

DieTa

Aktives Mitglied

2nd

Aktives Mitglied