Probleme mit Anzeige von divs in IE6

[kacy79]

Hallo Forengemeinde,

Ich habe eine Webseite (nur index-Seite) in HTML geschreiben, sämtliche Formatierungen liegen in CSS.

In Firefox, Safari und Opera, sowie in IE7 wird mir die Seite korrekt angezeigt.
In IE6 verhaut mir der Browser allerdings meine DIV-Container.
Da die Zielgruppe dieser Seite allerdings häufig noch IE6 verwendet, bleibt mir nichts anderes übrig, als sie auch hierfür zu optimieren.

Siehe:
Lorem ipsum

Quelltext ist über Browser abrufbar, deshalb wird er hier nicht angefügt.

Hat jemand eine Idee, wie ich dieses Problem beheben kann? Wir rätseln schon seit Tagen mit 4 Personen hier rum und finden leider die Lösung nicht.
Für eure Hilfe bin ich jetzt schon sehr dankbar.

Gruß Kacy

Die CSS dafür ist:

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;}  
    

[ChrisB]

Hi,

In IE6 verhaut mir der Browser allerdings meine DIV-Container.
Da die Zielgruppe dieser Seite allerdings häufig noch IE6 verwendet, bleibt mir nichts anderes übrig, als sie auch hierfür zu optimieren.

Siehe:
Lorem ipsum

Den Fehler im HTML (mehrfach verwendete ID) beseitigen;
die Fehler im CSS beseitigen;
dann fuer den IE 6 ggf. noetige Anpassungen vornehmen.

MfG ChrisB

[kacy79]

Hallo ChrisB,

CSS ist mittlerweile valide und die doppelte ID ist beseitigt. Beides hat aber nichts mit dem Zerhauen der Container in IE6 zu tun.

Welche Anpassungen meinst du? Denn wenn ich (oder meine Kollegen) wüsste(n), was zu machen ist, hätte ich hier nicht gepostet.

Gruß Kacy

Den Fehler im HTML (mehrfach verwendete ID) beseitigen;
die Fehler im CSS beseitigen;
dann fuer den IE 6 ggf. noetige Anpassungen vornehmen.

MfG ChrisB

Lorem ipsum

[Gernot Back]

Hallo kacy79,

Welche Anpassungen meinst du? Denn wenn ich (oder meine Kollegen) wüsste(n), was zu machen ist, hätte ich hier nicht gepostet.

Lorem ipsum

#navigation a {  
...  
  border-width:0 1px 1px 0;  
...  
}

Dieses Konstrukt halte ich für nicht so sinnvoll. Warum verpasst du die rechte Außenlinie nicht deiner Navigationsliste insgesamt oder dem Container in dem sie steckt, sondern stattdessen jedem Link einzeln? Außerdem hast du vergessen, dich zu Padding und Margin der LI-Elemente zu äußern, die deine Links hier umschließen. Möglicherweise sieht der IE da ein eigenes Default-Padding und/oder -Margin vor.

Im Bereich der "#subnavigation" hast du daran ja auch gedacht, warum nicht im Bereich der "#navigation"?

Gruß Gernot

[Kacy79]

Hallo Gernot,
Hab's geändert, hat aber keine Auswirkungen auf das eigentliche Problem.

Ich spiele gerade mit dem Gedanken, einen Hinweis auf die Seite zu setzen im IE6, dass dieser nicht mehr unterstützt wird. Und Fertig.
Gruß Kacy

Im Bereich der "#subnavigation" hast du daran ja auch gedacht, warum nicht im Bereich der "#navigation"?

Gruß Gernot