IE6 zeigt keinen Inhalt an
0 0 
cross
0 
Der Martin
0 0 cross
0 0 0 0 0
IE6 zeigt keinen Inhalt an
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;
}
-
Om nah hoo pez nyeetz, blacky!
online-Beispiel?
Matthias
--
-
Entschuldigung, ich hatte ganz vergessen den Link anzugeben
Hier ist er ;)
-
-
Hallöchen auch,
Hier ist die verwendete CSS-Datei:
/* Seiten */
#content {
position: relative;
margin: 0px;
min-height: 625px;
background-image: url(bilder/noten.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}Was soll denn das "position:relative;" so ganz alleine dort? MfG cross-
Hi,
#content {
position: relative;
[...]
}> Was soll denn das "position:relative;" so ganz alleine dort? normalerweise damit das Element als Bezugspunkt für absolut positionierte Kindelemente dienen kann. Davon seh ich allerdings nichts. So gesehen ... ist das vollkommen sinnfrei und überflüssig. Ciao, Martin -- Wenn Zeit das Kostbarste ist, was wir haben, dann ist Zeitverschwendung die größte aller Verschwendungen. (Benjamin Franklin, amerikanischer Tüftler und Politiker) -
Hallo Cross,
vielen Dank für deinen Hinweis. Ist mir nicht aufgefallen, das "position:relative" so ganz alleine nichts bringt.
Der Internet Explorer 6 zeigt nun folgendes:
Jetzt muss ich nur noch den Abstand nach oben wegbekommen.
Hat da jemand eine Idee?
Nochmal vielen Dank cross ;-)
Mfg blacky
-
Hallöchen auch,
Hallo Cross,
vielen Dank für deinen Hinweis. Ist mir nicht aufgefallen, das "position:relative" so ganz alleine nichts bringt.
Versuch doch ruhig das position:relative, allerdings mit Verschiebungswerten. Schau mal, was passiert. ;)
MfG
cross
-
-
-
Hi blacky!
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.
Der Inhalt wird unterhalb des Navigations-div angezeigt. Warum auch immer. Ich habe ein wenig rumgespielt und dem content einen Rahmen gegeben, um zu sehen, wie das div aussieht (border: 1px solid black;) und schwups: Der Inhalt saß da, wo er sein sollte. Wahrscheinlich irgendein verrückter IE6-Bug.
Ein Würgaround für den IE6 wäre, per IE-Hack dem content einen dünnen weißen Rahmen zu geben. Aber vielleicht kennt ja einer diesen Bug und weiß eine andere Lösung.Sonstige Hinweise:
Wenn die Seite etwas semantischer aufgebaut wäre, ergäbe sich eventuell auch der Fehler im IE. Das ist die reinste DIV-Suppe, die Navigation *schreit* nach einer unsortierten Liste und Überschriften sollten nicht für sonstwas missbraucht werden:<div id="footer">
<h1>generiert in 0,0012 Sekunden</h1>
</div>Ernsthaft? Da kann ich nur sagen, Du schuldest mir ein neues Paar Schuhe.
mfG
Benjamin--
For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.-
Hi Benjamin!
Hi blacky!
Wahrscheinlich irgendein verrückter IE6-Bug.Offenbar handelt es sich um den hier. Der IE6 fügt zwischen dem floatenden div und dem Content noch 3 Pixel ein. Dadurch würde der Content über die Breite des Containers von 900 Pixel hinausragen und wird unter die Navigation geschoben. Also könntest Du dem IE6 ein
margin-left: -3px;mitgeben.
mfG
Benjamin--
For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.-
Hi Benjamin,
vielen Dank für deine vielen Informationen.
Ich habe jetzt die Linie unterhalb der Überschrift ein paar Pixel kürzer gemacht und schon klappt es.
Du hattest recht, der Content ist über die Breite des Containers gegangen und wurde deshalb unter die Navigation geschoben.
Mit den Überschriften (im Footer) gebe ich dir recht, passt an der Stelle nicht so wirklich ;-) Ich werde das schnellstmöglich umstellen.
Die Links hatte ich in einer unsortierten Liste, allerdings wurde der Text dann zu weit rechts dargestellt. Da muss ich nochmal nachschauen.
Danke!
Mfg
blacky-
Hi Blacky!
Die Links hatte ich in einer unsortierten Liste, allerdings wurde der Text dann zu weit rechts dargestellt. Da muss ich nochmal nachschauen.
Das Problem sollte sich mit Margin/Padding lösen lassen.
mfG
Benjamin--
For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.-
Hi Benjamin,
ich habe nun die Links in einer unsortierten Liste, die Überschriften werden nicht mehr zweckentfremdet und einen ganzen DIV eingespart.
Danke für die Tipps ;)
Gruß Blacky
<!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 "Rote Husaren" Bad Ems e.V.</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <meta name="revisit-after" content="14 days" /> <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" /> <p><a href="index.php?pid=0">Startseite</a></p> </div> <div id="outer"> <div id="left"> <ul> <li><a href="index.php?pid=2000">Unser Verein</a></li> <li><a href="index.php?pid=1000">Aktuelles</a></li> <li><a href="index.php?pid=3000">Musiker</a></li> <li><a href="index.php?pid=9002">Repertoire</a></li> <li><a href="index.php?pid=4000">Presse</a></li> <li><a href="index.php?pid=9001">Terminplan</a></li> <li><a href="index.php?pid=5000">Jugend</a></li> <li><a href="index.php?pid=9055">Linkliste</a></li> <li><a href="index.php?pid=9057">Gästebuch</a></li> <li><a href="index.php?pid=9000">Impressum</a></li> <li><a href="index.php?pid=9056">News</a></li> <li><a href="index.php?pid=9051">Galerie</a></li> <li><a href="index.php?pid=9054">Kontakt</a></li> <li><a href="http://validator.w3.org/check?uri=referer"><img alt="" src="bilder/xhtml.gif" width="80" height="15" /></a></li> <li><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="bilder/css.gif" width="80" height="15" /></a></li> </ul> </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. Hier haben Sie die Möglichkeit, sich ausführlich über den Musikverein "Rote Husaren" in der Vbgm. Bad Ems e.V. zu informieren. Sie finden nicht nur Informationen zum Verein, zu den Musikern und zur Jugendarbeit, sondern Sie erfahren auch etwas über unsere Vereinsgeschichte und können aktuelle Fotos in unserer Galerie anschauen.</p> <p>Wir würden uns sehr freuen, Sie auf einem unserer Auftritte begrüßen zu dürfen.</p> <p><b>Ihr Musikverein Rote Husaren</b></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 id="footer"> <p>generiert in 0,0012 Sekunden</p> </div> </div> </body> </html>-
Hallo,
ich habe nun die Links in einer unsortierten Liste, die Überschriften werden nicht mehr zweckentfremdet und einen ganzen DIV eingespart.
sehr schön - weitermachen mit Einsparen!
<div id="banner">
<img alt="" src="bilder/banner.jpg" width="900" height="95" />
<p><a href="index.php?pid=0">Startseite</a></p>
</div>Hier würde ich überlegen, ob du nicht einfach nur EIN Blockelement nimmst (etwa das p-Element), dieses so groß machst wie das Bild, und das Bild dann als Hintergrundbild (CSS) einsetzt. Dann würde sich das Markup hier weiter reduzieren auf:
<p id="banner">
<a href="index.php?pid=0">Startseite</a>
</p>Im Prinzip könntest du sogar das p-Element einsparen, wenn du das a-Element mit display:block formatierst und *dem* dann sämtliche Formatierung verpasst.
<div id="left">
<ul>
<li><a href="index.php?pid=2000">Unser Verein</a></li>
<li><a href="index.php?pid=1000">Aktuelles</a></li>
[...]
</ul>
</div>Das umschließende div-Element ist überflüssig. Ein div-Element, das nur ein einziges Kindelement enthält, sollte einem immer zu denken geben. Die Formatierung, die du hier auf div#left anwenden willst, könntest du ebensogut direkt auf ul anwenden.
Übrigens ist "left" ein denkbar ungünstiger Bezeichner - es sei denn, es geht um Übriggebliebenes. Bezeichner nach dem gewünschten Erscheinungsbild zu benennen, wird zum gedanklichen Spießrutenlauf, wenn die Darstellung später mal grundlegend verändert werden soll.<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>Möchte das vielleicht eine Überschrift zweiter Ordnung sein?
<div class="bild"><a href="bilder/husaren.jpg"><img alt="" src="bilder/startseite.jpg" width="550" height="336" /></a></div>
Das div-Element ist überflüssig; die entsprechende Formatierung könnte man auch direkt auf das a-Element anwenden (das dann mit display:block aufgewertet wird).
<br />
Wozu das? Deine div-Elemente bilden eh Blöcke, und für Abstände ist CSS da.
<div id="footer">
<p>generiert in 0,0012 Sekunden</p>
</div>Ist das eine Information, die den Besucher wirklich interessiert? Sowas würde ich, wenn's mich als Betreiber interessiert, in irgendein Protokoll schreiben, aber nicht in die Ausgabe zum Client.
So long,
Martin--
Einer aktuellen Erhebung zufolge sind zehn von neun Ehefrauen eifersüchtig auf ihren Mann.
-
Hallo Martin,
vielen Dank für deine hilfreichen Tipps ;-)
Die meisten Sachen konnte ich wie du beschrieben hast umsetzten:
<!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 "Rote Husaren" Bad Ems e.V.</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="language" content="de" /> <meta name="robots" content="index,follow" /> <meta name="revisit-after" content="14 days" /> <link rel="stylesheet" type="text/css" href="husaren.css" /> </head> <body> <div id="container"> <p id="banner"> <a href="index.php?pid=0">Startseite</a> </p> <div id="outer"> <ul id="navigation"> <li><a href="index.php?pid=2000">Unser Verein</a></li> <li><a href="index.php?pid=1000">Aktuelles</a></li> <li><a href="index.php?pid=3000">Musiker</a></li> <li><a href="index.php?pid=9002">Repertoire</a></li> <li><a href="index.php?pid=2004">Probe</a></li> <li><a href="index.php?pid=4000">Presse</a></li> <li><a href="index.php?pid=9001">Terminplan</a></li> <li><a href="index.php?pid=5000">Jugend</a></li> <li><a href="index.php?pid=9055">Linkliste</a></li> <li><a href="index.php?pid=9057">Gästebuch</a></li> <li><a href="index.php?pid=9000">Impressum</a></li> <li><a href="index.php?pid=9056">News</a></li> <li><a href="index.php?pid=9051">Galerie</a></li> <li><a href="index.php?pid=9054">Kontakt</a></li> <li><a href="http://f3.webmart.de/f.cfm?id=2816724">Mitgliederforum</a></li> <li><a href="http://validator.w3.org/check?uri=referer"><img alt="" src="bilder/xhtml.gif" width="80" height="15" /></a></li> <li><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="bilder/css.gif" width="80" height="15" /></a></li> </ul> <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. Hier haben Sie die Möglichkeit, sich ausführlich über den Musikverein "Rote Husaren" in der Vbgm. Bad Ems e.V. zu informieren.</p> <p>Wir würden uns sehr freuen, Sie auf einem unserer Auftritte begrüßen zu dürfen.</p> <p><b>Ihr Musikverein Rote Husaren</b></p> <div class="bild"> <img alt="" src="bilder/startseite.jpg" width="500" height="306" /> </div> <h2>News</h2> <ul> <li>25.04.2010: "<a href="index.php?pid=9056">Neue Homepage</a>"</li> </ul> </div> </div> <p id="footer">© Mv. Rote Husaren Bad Ems</p> </div> </body> </html>Mfg
Blacky
-
-
-
-
-
-