Hallo,
ich habe in den letzten Wochen eine Homepage neu erstellt und bin nun auf folgendes Problem gestoßen:
Alle Browser zeigen die Seite richtig an (kontrolliert mit Browsershots.org), bis auf den Internet Explorer 6. Ich weiß das es dort Probleme geben kann, allerdings wundert es mich, dass der Inhalt komplett leer bzw. weiß ist, aber sonst alles recht gut angezeigt wird.
Hier sind dazu Screenshots:
Internet Explorer 6
Internet Explorer 8
Wo kann das Problem liegen?
Das Grundgerüst habe ich von der Seite http://www.intensivstation.ch/templates/. Dort steht, dass es auch für den IE6 überprüft wurde.
Hier ist der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Musikverein</title>
<link rel="stylesheet" type="text/css" href="husaren.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img alt="" src="bilder/banner.jpg" width="900" height="95" />
<h1><a href="index.php?pid=0">Startseite</a></h1>
</div>
<div id="outer">
<div id="inner">
<div id="left">
<p><a href="index.php?pid=2000">Unser Verein</a></p>
<p><a href="index.php?pid=9054">Kontakt</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img alt="" src="bilder/xhtml.gif" width="80" height="15" /></a><br /><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="bilder/css.gif" width="80" height="15" /></a></p>
</div>
<div id="content">
<h1>Startseite</h1>
<a href="http://www.mv-rattstadt.de/topliste-inhalt.php?id=248"><img class="floatr" alt="" src="http://www.mv-rattstadt.de/image3.php?id=248" width="41" height="51" /></a>
<p>Liebe Besucher,</p>
<p>wir freuen uns sehr Sie auf unserer Homepage begrüßen zu dürfen.... anschauen.</p>
<p>Wir würden uns sehr freuen, Sie auf einem unserer Auftritte begrüßen zu dürfen.</p>
<div class="bild"><a href="bilder/husaren.jpg"><img alt="" src="bilder/startseite.jpg" width="550" height="336" /></a></div>
<br />
</div>
</div>
</div>
<div id="footer">
<h1>generiert in 0,0013 Sekunden</h1>
</div>
</div>
</body>
</html>
Hier ist die verwendete CSS-Datei:
/* Seiten */
html {
height: 100%;
}
body {
background-color: #A60800;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #000000;
margin: 0px;
padding: 0px;
min-height: 101%;
}
/* Grundgerüste */
#container {
width: 900px;
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
#banner {
text-align: left;
padding: 0px;
margin: 0px;
}
#outer {
border-left: solid 200px #FF4940;
background-color: #FFFFFF;
}
#inner {
margin: 0px;
width:100%;
}
#left {
width: 200px;
float: left;
position: relative;
margin-left: -200px;
margin-right: 1px;
}
#content {
position: relative;
margin: 0px;
min-height: 625px;
background-image: url(bilder/noten.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#footer {
clear: left;
padding: 0px;
margin: 0px;
text-align: right;
}
/* Forumlare */
input.text {
color: #000000;
border: 1px solid #AD3F3C;
background-color: #FFDEDC;
height: 17px;
width: 250px;
padding: 2px;
margin: 5px;
}
input.button {
margin: 5px;
}
img.formular {
margin: 5px;
}
textarea {
color: #000000;
border: 1px solid #AD3F3C;
background-color: #FFDEDC;
height: 100px;
width: 250px;
padding: 2px;
margin: 5px;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}
select {
color: #000000;
border: 1px solid #AD3F3C;
background-color: #FFDEDC;
height: 23px;
width: 256px;
padding: 0px;
margin: 5px;
}
/* Bereiche */
div.hinweis {
margin: 10px auto;
padding: 5px;
border: 1px solid #FCDF98;
background-color: #FBF2DD;
width: 500px;
text-align: center;
}
div.fehler {
margin: 10px auto;
padding: 5px;
border: 1px solid #AD3F3C;
background-color: #FFDEDC;
width: 500px;
text-align: center;
}
div.erfolg {
margin: 10px auto;
padding: 5px;
border: 1px solid #7CD698;
background-color: #D6F3DF;
width: 500px;
text-align: center;
}
div.bild {
text-align: center;
font-style: italic;
width: 550px;
line-height: 145%;
margin: 5px auto;
}
/* Tabellen */
table {
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 0px;
width: 680px;
}
th {
padding: 5px;
}
td {
padding: 0px 5px;
}
tr.kopf {
background-color: #BF3730;
color: #FFFFFF;
font-weight: bold;
height: 20px;
}
tr.zeile1 {
background-color: #FFDEDC;
height: 30px;
}
tr.zeile2 {
background-color: #FFFFFF;
height: 30px;
}
tr.leer {
background-color: transparent;
height: 10px;
}
td.eintrag {
padding: 0px;
background-color: #FFFFFF;
border: 1px solid #ff0d00;
}
/* Breiten */
.breite40 {
width: 40px;
}
.breite80 {
width: 80px;
}
.breite90 {
width: 90px;
}
.breite100 {
width: 100px;
}
.breite150 {
width: 150px;
}
.breite200 {
width: 200px;
}
/* Ausrichtung */
.links{
text-align: left;
}
.zentriert{
text-align: center;
}
.rechts{
text-align: right;
}
/* Bilder */
img {
margin: 5px 0px;
border: 0px;
}
img.floatl {
float: left;
margin: 5px 10px;
}
img.floatr {
float: right;
margin: 5px 20px;
}
#banner img {
padding: 5px 0px;
}
/* Universal */
.drittel {
width: 33.33%;
}
.viertel {
width: 25%;
}
.haelfte {
width: 50%;
}
.oben {
vertical-align: top;
}
/* Texte */
p {
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #000000;
padding: 5px 10px;
line-height:145%;
margin: 0px;
text-align: justify;
}
/* Links */
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
#banner a {
color: #FFFFFF;
}
#left a {
color: #FFFFFF;
}
#content td a {
color: #AD3F3C;
}
a.extern {
color: #000000;
background: url(bilder/link.png) center left no-repeat;
padding-left: 13px;
}
/* Überschriften */
#footer h1, #banner h1 {
font-size: 11px;
color: #FFFFFF;
background-color: #BF3730;
border-top: 1px solid #FF0D00;
border-bottom: 1px solid #FF0D00;
padding: 3px 10px;
margin: 0px
}
#content h1 {
font-size: 13px;
text-transform: uppercase;
color: #AD3F3C;
border-bottom: 1px solid #FF0D00;
width: 680px;
padding: 5px 5px;
margin: 0px 5px 5px 5px;
}
#content h2 {
text-decoration: underline;
font-size: 12px;
color: #AD3F3C;
padding: 0px 10px;
margin: 10px 0px 0px 0px;
}
#content h3 {
font-size: 12px;
color: #000000;
padding: 0px 10px;
margin: 10px 0px 0px 0px;
}
/* Navigation */
#left p {
padding: 10px;
}
/* Listen */
#content ul {
list-style-type: square;
}
#content li {
margin: 6px 0px;
}