IE 6 Problem mit Tabellen

[dagmarin]

Hallo,
die folgende Seite wird in allen aktuellen Browsern korrekt dargestellt, nicht aber im IE6.
Vorschau

Hier werden die Tabellen unschön auseinandergezogen. Ich war nun 2 Tage auf Fehlersuche, habe mit versch. Doctypes experimentiert, vermutet, dass es an den PNGs liegt 8interessantes Skript zur PNG-Darstellung im head), und height und width-Angaben gemacht ... Ich find den Fehler für die Verzerrung der Tabellen nicht.

Habt Ihr eine Idee?

Nach Quellcode bitte bei der Verlinkung schauen

CSS:

body {  
	margin:0; padding:0;  
}  
.full {  
	height: 100%;  
	width: 100%;  
}  
ul#Navigation li {  
	list-style: none;  
	margin: 5%;  
	padding: 0;  
  }  
  
  ul#Navigation a, ul#Navigation span{  
	display:block;  
	padding: 2%;  
	text-decoration: none;  
	border-left-color: #00519e;  
	border-top-color: #00519e;  
	color: #00519e;  
	border-top-width: 1px;  
	border-right-width: 1px;  
	border-bottom-width: 1px;  
	border-left-width: 1px;  
	border-top-style: none;  
	border-right-style: none;  
	border-bottom-style: solid;  
	border-left-style: none;  
	border-right-color: #00519e;  
	border-bottom-color: #00519e;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 13px;  
	text-align: left;  
  }  
  
  ul#Navigation a:hover {  
   color: white; background-color: #00519e;  
  }  
    ul#Navigation span {  
	color: white;  
	background-color: #00519e;  
	text-transform: uppercase;  
	text-align: right;  
  }  
  #Menulinks {  
	position:relative;  
	width:165px;  
	height:115px;  
	z-index:1;  
	left: -5px;  
	 }  
	#Menurechts {  
	position:relative;  
	width:165px;  
	height:115px;  
	z-index:1;  
	left: -5px;  
	top: 250;  
}  
    ul#Navi li {  
    list-style: none;  
    margin: 5%; padding: 0;  
  }  
  
  ul#Navi a, ul#Navi span{  
	display:block;  
	padding: 2%;  
	text-decoration: none;  
	border-left-color: #00519e;  
	border-top-color: #00519e;  
	color: #00519e;  
	border-top-width: 1px;  
	border-right-width: 1px;  
	border-bottom-width: 1px;  
	border-left-width: 1px;  
	border-top-style: none;  
	border-right-style: none;  
	border-bottom-style: solid;  
	border-left-style: none;  
	border-right-color: #00519e;  
	border-bottom-color: #00519e;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 13px;  
	text-align: left;  
  }  
  
  ul#Navi a:hover {  
	color: #FFFFFF;  
	background-color: #00519e;  
	border-bottom-width: 1px;  
	border-top-style: none;  
	border-right-style: none;  
	border-bottom-style: solid;  
	border-left-style: none;  
	border-top-color: #00519e;  
	border-right-color: #00519e;  
	border-bottom-color: #00519e;  
	border-left-color: #00519e;  
  }  
    ul#Navi span {  
	color: white;  
	background-color: #00519e;  
	text-transform: uppercase;  
	text-align: right;  
  }  
/* menue oben */  
  
#menu1 a, #menu1 a:visited, #menu1 a:active  
{display: block;  
color:#00519e;  
text-decoration:none ; font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif; font-size: 12px;  
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;  
margin-left: 0px;margin-right: 0px;  
height:20px;  
line-height:20px;  
text-align:center;  
  
}  
#menu1 a:hover {  
color:#00519e; text-decoration:underline;  
background-position:50% 100%;  
}  
  
  
.trenn {  
	width:1px;  
	;  
	color:#00519e;  
	font-size: 10px;  
}  
.ueberschrift {  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-weight: bold;  
	text-align: center;  
	font-size: 20px;  
	line-height: 130%;  
}  
.ueberschrift_oben {  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-weight: bold;  
	text-align: center;  
	font-size: 24px;  
	color: #FFFFFF;  
	vertical-align: bottom;  
}  
.ueberschrift_oben1 {  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-weight: bold;  
	text-align: right;  
	font-size: 24px;  
	color: #FFFFFF;  
	vertical-align: bottom;  
	background-color: #fec900;  
}  
.ueberschrift_oben2 {  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-weight: bold;  
	text-align: left;  
	font-size: 24px;  
	color: #FFFFFF;  
	vertical-align: bottom;  
	background-color: #00519e;  
}  
.text {  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 13px;  
	font-weight: normal;  
	text-align: left;  
	line-height: 140%;  
}  
.adresse {  
	color: #FFFFFF;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 9px;  
	text-align: center;  
	font-weight: normal;  
}  
.link_adresse {  
	color: #FFFFFF;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 9px;  
	text-align: center;  
	font-weight: normal;  
	text-decoration: none;  
}  
.link_download {  
	color: #000000;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 9px;  
	text-align: center;  
	font-weight: normal;  
	text-decoration: none;  
}  
.link_text {  
	color: #000000;  
	font-family: "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;  
	font-size: 13px;  
	font-weight: normal;  
	text-decoration: none;  
}  
.trans-rechts {  
	background-color: #00519e;  
	background-image: url(../bilder/trans_rechts.png);  
	background-repeat: repeat-y;  
}  
.preise {  
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 10px;  
	text-align: center;  
	border: 2px solid #999999;  
  
}  
  
.preise td {  
	border: 1px solid #999999;  
	vertical-align: bottom;  
}  
.ueber {  
	font-size: 14px;  
	font-weight: bold;  
  
	}  
.fett {  
	font-weight: bold;  
	font-size: 11px;  
  
	}  
#Uberneutral {  
	position:relative;  
	width:800px;  
	height:50px;  
	z-index:2;  
	left: 0;  
	top: 20;  
}  
.anfahrt {  
	border-top-width: 1px;  
	border-right-width: 1px;  
	border-bottom-width: 1px;  
	border-left-width: 1px;  
	border-bottom-style: solid;  
	border-top-color: #000000;  
	border-right-color: #000000;  
	border-bottom-color: #000000;  
	border-left-color: #000000;  
	border-top-style: none;  
	border-right-style: none;  
	border-left-style: none;  
}  
.hellblau {  
	background-color: #e7ecf5;  
	border-top-width: 0px;  
	border-right-width: 0px;  
	border-bottom-width: 1px;  
	border-left-width: 0px;  
	border-top-style: none;  
	border-right-style: none;  
	border-bottom-style: solid;  
	border-left-style: none;  
	border-top-color: #00519e;  
	border-right-color: #00519e;  
	border-bottom-color: #00519e;  
	border-left-color: #00519e;  
}  
.blau_rand {  
	padding-top: 0px;  
	padding-right: 0px;  
	padding-bottom: 0px;  
	padding-left: 10px;  
}  
li {  
  margin: 0;  
  padding: 0;  
}  
ul {  
  padding: 0;  
  }  

Anbei noch 2 Screens:

Es wäre superklasse, wenn jemand eine Idee hätte!
Bin echt gespannt, woran es liegen könnte.

[LX]

Hallo!

Nichts für ungut, aber die Daten, die Du da anzeigen willst, sind überhaupt nicht tabellarisch - warum nimmst Du also kein div-basiertes Layout mit entsprechenden Listen und sonstigen Elementen?

Gruß, LX

[dagmarin]

Hallo LX,

weil die Seite so gut wie fertig ist und in aktuellenBrowsern korrekt dargestellt wird. nur nicht im IE 6, der leider noch weit verbreitet zu sein scheint.

Was meinst Du mit div-Layout? Div-Ebenen oder Css-Boxen?

Danke und viele Grüße,
dagmarin

[Gernot Back]

Hallo dagmarin,

weil die Seite so gut wie fertig ist und in aktuellenBrowsern korrekt dargestellt wird. nur nicht im IE 6, der leider noch weit verbreitet zu sein scheint.

Mit Tabellenlayout bekommst du das im IE aber nur mit dem dreckigen Quirksmodus hin und durch den handeltst du dir höchstwahrscheinlich an anderer Stelle Darstellungsunterschiede in den diversen Browsern ein.

Vielleicht hilft dir diese Seite, die ich bei der Gelegenheit immer poste zu verstehen, was ich meine.

Gruß Gernot

[dagmarin]

Merci Gernot,

den Quirksmodus hab ich auch schon versucht - leider ohne Erfolg.
Wenn ich den Doctype Deiner Beispielseite verwende, verhagelts alles, es wird nicht mal mehr Schrift mittels Css formatiert.

Trotzdem vielen Dank!

[EKKi]

Mahlzeit dagmarin,

Hier werden die Tabellen unschön auseinandergezogen.

1. Definiere "unschön auseinandergezogen".

Ich war nun 2 Tage auf Fehlersuche, habe mit versch. Doctypes experimentiert,

2. Du solltest nicht nur mit DOCTYPEs experimentieren, sondern Dich dann auch an den jeweils gewählten halten: "85 Errors" sind jedenfalls nicht ohne und in meinen Augen ist es kein Wunder, wenn nicht alle Browser derart kaputte Seiten gleich darstellen. Behebe also zunächst die offensichtlichen Fehler!

MfG,
EKKi

[dagmarin]

Hallo EKKi,

Merci für Deine Antwort!

1. Siehe Screens: der weiße Bildrahmen sollte überall gleich dick bzw. dünn sein. Ebenso wird die Höhe der Blauen Linien ungewollt vergrößert.

2. Wo hast Du die Seite getestet? Welche Fehler sind es denn im Einzelnen?

Danke Dir, Vg dagmarin

[EKKi]

Mahlzeit dagmarin,

1. Siehe Screens: der weiße Bildrahmen sollte überall gleich dick bzw. dünn sein. Ebenso wird die Höhe der Blauen Linien ungewollt vergrößert.

Du setzt also Tabellen zur Gestaltung Deiner Seite(n) ein? Warum? Tabellen sind zur Darstellung tabellarischer Daten da. Für die Gestaltung solltest Du sinnvollerweise eher http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS verwenden (Grundlage dafür ist natürlich eine sinnvolle und semantisch brauchbare Struktur).

2. Wo hast Du die Seite getestet? Welche Fehler sind es denn im Einzelnen?

Wer lesen kann, ist klar im Vorteil ... und wer Links anklicken kann, bekommt auch was zu lesen. :-)

MfG,
EKKi