Probleme mit DIV in IE6

Kacy79 · 31 Januar 2009

Hallo liebe Forengemeinde,

ich habe in den letzten Tagen eine Index-Seite für meine Webseite entwickelt. Sämtliche Formatierungen liegen in CSS. Die Links funktionieren noch nicht, da die entsprechenden Unterseiten fehlen.

Sie wurde unter Firefox, Opera und Safari getestet und sieht dort so aus, wie sie aussehen soll.
Im IE ergeben sich aber 2 Probleme:

IE6: Die div-Container werden nicht so angezeigt, wie sie in allen anderen Browsern gezeigt werden. Container werden verschoben. Die Mitte der Seite ist ein "weißer leerer Fleck".

IE7: sämtliche Bilder werden "zum Teil" sehr pixelig angezeigt. "Zum Teil" deshalb, weil es auf 2 IE7 getestet wurde (kenne allerdings grade nicht die Version) und bei einem das Problem auftrat.

Die Seite ist zu finden unter Lorem ipsum

Wenn jemand eine Lösung zu den beiden Problemen (oder auch nur einem hat) wäre ich echt dankbar. Wir basteln nämlich schon zu 4. dran rum und alle können den/die Fehler nicht finden.

Liebe Grüße
Kacy

HTML-Code poste ich hier jetzt nicht, den Quelltext könnt ihr euch im Browser anzeigen lassen.

CSS folgt hier:

Code:

body	{
	background: #FFFFFF;
	color: #000000;
	font-family:Verdana, Helvetica, sans-serif;

	font-size: 101%;

	}

a			{ font-family: Verdana, Helvetica, sans-serif; color: #335785; text-decoration: none; }
a:hover		{ color: #9E834C; text-decoration: none; }
a:active	{ text-decoration: underline; }

h2 {
	margin:0 0 5px 0;
	padding:0;
	border:0;
	color:#9E834C;
	font-size:1.4em;
	font-weight:lighter;
	}


h3 {
	margin:15px 0 5px 0;
	padding:0;
	border:0;
	color:#000000;
	font-size:1em;
	font-weight:lighter;
	}

/* h4 und h5 nur im News-Kasten!!! */

h4 {
	margin:0px 0 7px 0; 
	color:#9E834C;
	font-size:1.2em;
	font-weight:600;
	}


h5 {
	margin:0px 0 4px 0;
	color:#335785;
	font-size:1.0em;
	font-weight:600;
	}


p {
	display:block;
	margin:0;
	padding:5px 0;
	border:0;
	}

em {			color:#000000;	font-weight:600;	font-style:normal;	}

strong {		color:#000000;	font-weight:bold;	font-style:normal;	}

/*zitieren
cite {
	padding:0 5px;
	border-left:5px solid #7490B8;
	background-color: #C2D3EE;
	font-size:1em;
	}
	
	
/* Horizontallinie
hr {
	margin:15px 0 25px 0;
	width:100%;
	height:5px;
	border:1px solid #86B637;
	border-left:0 none;
	border-right:0 none;
	color:#E5E5E5;
	background-color:#E5E5E5;
	}
*/	

html, body{ 
	margin:0; 
	padding:0; 
	text-align:center; 
	} 
 
#pagewidth{ 
	width:960px; 
	text-align:left;  
	margin-left:auto; 
	margin-right:auto;
	border-style:solid;
	border-width:1px;
	border-color:#335785;  
	} 
 
#header{
	position:relative; 
	height:145px; 
	width:100%;
	}

#header #headimage {
	margin:0;
	padding:0;
	border:0;
	width:210px;
	height:145px;
	float:left;
	background-color:#7490B8;
	}

#header #headbanner {
	margin:0;
	padding:0;
	border:0;
	width:539px;
	height:145px;
	float:left;
	background:url(headimage.gif) no-repeat;
	border-left:1px solid #335785;
	/*border-right:1px solid #335785;*/
	}


#header #headbanner h1{
	display:none;
	}

#header #logo {
	margin:0;
	margin-right:1px;
	padding:0;
	border:0;
	width:209px;
	height:145px;
	float:left;
	background-color: #FFFFFF;
	background-position: left;
	}	
	
#header #logo img{
	padding:0;
	border:0;
	}	
		
#leftcol{
	margin:0:
	padding:0;
	border:0;
	width:210px; 
	float:left; 
	position:relative; 
	}
	
#leftcol div.emptyspace{
	height:20px;
	width:210px;
	background-color:#335785;
	display:block;
	}
	
/* NAVIGATION .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/

#navigation {
	margin:0;
	padding:0;
	border:0;
	width: 210px;
	list-style: none;
	font-size:0.85em;
	}
	
#navigation a {
	display: block;
	margin:0;
	padding-top:8px;
	padding-left:50px;
	border:0;
	width: 160px;
	height:25px;
	background: url(punkthellblau.gif) repeat-y;
	border-bottom: 1px solid #335785;
	border-right: 1px solid #335785;
	font-size:0.9em;
	}
		
#navigation a:link, #navigation a:visited {
	color: #335785;
	text-decoration: none;
	}	
	
#navigation a.active {
	background: url(punkt.gif) repeat-y;
	color: #335785;
	}
		
#navigation a:hover {
	background: url(punktbeige.gif) repeat-y;
	color: #335785;
	}


#twocols{
	width:750px; 
	float:left; 
	position:relative; 
	border-right:solid;
	border-color:#335785;
	border-width:1px;
	}

/* RIGHT COLLUM .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
 
#rightcol{
	width:209px; 
	float:left; 
	position:relative; 
	background-color:#FFFFFF;
	}


#news{
	height:19px;
	background-color:#335785;
	display:block;
	list-style:none;
	color:#FFFFFF;
	font-size:0.8em;
	padding-left:10px;
	padding-top:1px;
	}	

#newsinhalt{
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	font-size:0.6em;
	border-bottom: solid 1px #335785;
    }

#newsinhalt2{
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	font-size:0.6em;
	border-bottom: solid 1px #335785;
    }


#kontakt{
	width:208px;
	height: 73px;
	border-bottom: 1px solid #335785;
	}

#kontaktbild{
	width:208px;
	height:69;
	border-right:1px solid #335785;
	border-bottom:1px solid white;
	border-left:1px solid white;
	border-top:1px solid white;
	}

#kontakt a {
	display: block;
	margin:0;
	width: 200px;
	height:70px;
	}

#kontakt a.active, #kontakt a:link, #kontakt a:visited #kontakt a:hover {
	color:#FFFFFF;
	text-decoration: none;
	}
	

/*CONTENT .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
	
#maincol{
	margin:0;
	padding:0;
	float: left; 
	display:inline; 
	position: relative; 
	width:540px;
	}

#maincol #content {
	padding:25px 25px;
	
	float:none;
	border-left:1px solid #335785;
	width:490px;
	font-size:0.7em;
	}
	
	
/* SUBNAVIGATION -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/


div#subnavigation { 
	margin:0;
	padding:0;
	border:0;
	border-left:1px solid #7490B8;
	border-right: 1px solid #7490B8;
	height:20px;
	width:539px;
	display:block;
	background-color:#335785;
	}
	
	
#subnavigation ul li { 
	display: inline;
	}


#subnavigation ul {
	margin:0;
	padding:0;
	font-size:.65em;
	}


#subnavigation ul li a {
	height:17px;
	padding: 3px 12px 0 12px;
	color: #C3D3EE;
	text-decoration: none;
	float: left;
	border-right: 1px solid #7490B8;
	}


#subnavigation ul li a:hover, #subnavigation ul li a:active, #subnavigation ul li a.active {
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	}
	
	
#footer {
	width:960px;
	font-size:0.6em;
	text-align:center;
	border-top:solid;
	border-width:1px;
	border-color:#335785;
	}
 
 
#twocols:after, #wrapper:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
 
  
#twocols, #wrapper{display: inline-table;}

* html #twocols, * html #wrapper{height: 1%;}
#twocols, #wrapper{display: block;}

prm · 31 Januar 2009

Konkret hab ich keine Lösung parat.
Aber bereinige zur Sicherheit mal noch diese Fehler
und diesen.

threadi · 31 Januar 2009

Kacy79 schrieb:
IE6: Die div-Container werden nicht so angezeigt, wie sie in allen anderen Browsern gezeigt werden. Container werden verschoben. Die Mitte der Seite ist ein "weißer leerer Fleck".

Du verwendest öfter Breitenangaben (width) zusammen mit Innenabständen (padding). Das verursacht Probleme im Box-Modell, welches man besonders beim IE6, aber auch teilweise bei der 7 zu spüren bekommt. Verzichte folglich auf diese Innenabstände, wenn du sie brauchst füge weitere divs innerhalb ein und gib denen diese Abstände.

IE7: sämtliche Bilder werden "zum Teil" sehr pixelig angezeigt.

Kann ich mir schwer vorstellen, außer es handelt sich um eine nutzerspezifische Einstellung oder einen UMTS-Internetzugang.

Kacy79 · 31 Januar 2009

Danke Euch beiden!

@prm: Den zweiten Fehler kannte ich schon, der hat aber keinerlei Auswirkungen in der Anzeige in irgendeinem Browser. CSS ist jetzt valide. War nur ein kleiner Verschreiber. Ein : sollte/musste ein ; sein.

@threadi: die Innenabstände werden benötigt, da sonst der Text direkt am Rand anfängt. Oder gibt es da noch eine andere Möglichkeit außer weitere div's einzufügen.

Gruß Kacy

threadi · 31 Januar 2009

Ohne dabei Probleme in diversen Browsern zu verursachen? Nein.

prm · 31 Januar 2009

Wenn die Seite einen qualifizierten Doctype unter Angabe der DTD-URL hat, sollten padding und margin auch im IE 6 keine Probleme verursachen.

Für den IE-Doubled-Float-Margin-Bug gibt es in den CSS-Angaben keinen Anhaltspunkt.
Vermutlich ist es dann ein anderer IE6-Bug.

Ich habe jetzt keinen IE 6 zum Testen parat.

Versuche mal mit

Code:

*html #content {width: ...}

für den IE 6 eine geringere Breite zu definieren als bisher hinterlegt.

neuroleptika · 31 Januar 2009

Den Boxmodellfehler gibt im IE6 (Standartkonformer Modus) nicht.

Der IE-Doubled-Float-Margin-Bug schlägt nur zu wenn float und margin im selben Element in die selbe Richtung zeigen.
Das ist hier nicht der Fall.

Die Inhalte passen nicht in die Boxen.
Moderne Browser lassen Überragende Inhalte einfach überlaufen wenn nichts anderes angegeben ist (overflow: visible).
Der IE5 bis 6 verbreitert die Boxen soweit bis der Inhalt reinpasst (Expanding Box Bug).
Ebenso bei Höhenangaben (verwendet height wie min-height)

Hier liegt es an unnötigen (und falschen) Breitenangaben:

Code:

#navigation a {
	display: block;
             ..
	padding-left:50px;
	border:0;
	[COLOR="DarkRed"][B]/*width: 160px; entfernen */[/B][/COLOR]
             ..
	border-bottom: 1px solid #335785;
	border-right: 1px solid #335785;
}

#maincol #content {
	padding:25px 25px;
            ..
	border-left:1px solid #335785;
	[COLOR="#8b0000"][B]/*width:490px; entfernen*/[/B][/COLOR]
             ..
	}

div#subnavigation { 
	margin:0;
	padding:0;
	border:0;
	border-left:1px solid #7490B8;
	border-right: 1px solid #7490B8;
	height:20px;
	[COLOR="#8b0000"][B]/*width:539px; entfernen*/[/B][/COLOR]
	display:block;
	background-color:#335785;
	}

#kontaktbild{
             [COLOR="#8b0000"][B]/*Width:208px; falsche Breite */[/B][/COLOR]
	width:206px [COLOR="#8b0000"][B]/*richtig*/[/B][/COLOR];
	height:69;
	border-right:1px solid #335785;
	border-bottom:1px solid white;
	border-left:1px solid white;
	border-top:1px solid white;
	}

#maincol #content {
	padding:25px 25px;
	..
	border-left:1px solid #335785;
	[COLOR="#8b0000"][B]/*width:490px; entfernen*/[/B][/COLOR]
	..
	}

Die relativen Positionierungen sind nicht nötig.
Der Standardwert für position ist static. verwende position: relative nur wenn du es brauchst oder zum Bug fixen im IE.

Die Verpixelung im IE7 kann ich nicht feststellen.
Ist der Zoom auf 100% eingestellt?
Richtig glatt sieht es in anderen Browsern auch nicht aus.

Wegen des Boxmodellfehlers im IE5-5.5 würde ich ein weiteres Element um die Boxen legen und damit width von padding und border trennen.
Für andere Browser ist das nicht nötig.

Kacy79 · 1 Februar 2009

Hallo neuroleptica,

habe die von dir angemerkten Änderungen gemacht, allerdings bleibt das Ergebnis das Gleiche. Leider. Siehe online.

Das Einzige, was ich noch nicht gemacht habe, ist eine weitere Box in der rechten Spalte einzufügen, um padding und width zu trennen.

Allerdings habe ich durch Zufall mal das float:left bei #rightcol rausgenommen. Das Ergebnis davon war, dass ich jetzt im Firefox und Safari die gleiche verschobene Anzeige wie im IE6 bekommen habe.

Gruß
Kacy

neuroleptika · 1 Februar 2009

Ich habe es im IE6 und 7 ausprobiert.
Bei mir passt es.

Ich habe jetzt keine Lust und Zeit das noch mal zu vergleichen.
Aber ich könnte das korrigierte Beispiel hochladen wenn du möchtest.

Kacy79 · 1 Februar 2009

Hallo neuroleptica,

wäre prima, wenn du das machen könntest.

Danke im Voraus.
Kacy

neuroleptika · 1 Februar 2009

Die url zum Logo habe ich zerstört.
Die Fehlerhaften css-Anweisungen habe ich mit einem + zerstört (ging schneller wie auskommentieren).
Die Hintergrundfarbe von #twocols habe ich zur Übersicht grün eingefärbt.

Marketingberatung Kerstin Schmidt

Das css für den IE habe ich nicht berücksichtigt (hat nur Auswirkungen für IE 5.x).
Entferne es oder verstecke es vor IE6-8.
(Suchtipp: conditional comments.)

Die Pfade zu den Hintergrundbildern stimmen natürlich nicht mehr.
Darum ging es ja auch nicht.

Für IE5 bis 5.5 (win) währen weitere Anpassungen notwendig.
Mit IE(mac) kenne ich mich nicht aus (der ist hoffentlich ausgestorben).

Wozu die position: relative; dienen habe ich nicht untersucht.
Ich denke die kannst du löchen.

Probleme mit DIV in IE6

Kacy79

Neues Mitglied

prm

Aktives Mitglied

threadi

Moderator

Kacy79

Neues Mitglied

threadi

Moderator

prm

Aktives Mitglied

neuroleptika

Aktives Mitglied

Kacy79

Neues Mitglied

neuroleptika

Aktives Mitglied

Kacy79

Neues Mitglied

neuroleptika

Aktives Mitglied

Neueste Beiträge