nicht angemeldet
2 Spalten: clear - funktioniert nicht im IE
Hallo zusammen,
ich hab die letzten 2 Stunden mit der Forumssuche verbracht, aber alle dort aufgeführten Lösungswege haben irgendwie nicht funktioniert oder ich habe sie falsch interpretiert.
Folgendes (wohl sehr häufiges Problem): Kopfzeile, dann Inhalt, darunter eine Fusszeile. Inhalt soll eine linke und eine rechte Spalte haben, beide mit festen Breiten, aber in der Höhe variabel. Darunter soll der Fussbereich kommen. Da ich noch keine Inhalte habe, ist die Höhe vorläufig festgelegt auf 400px, die soll später noch weg und die Höhe soll sich dem Inhalt anpassen.
Soweit so gut. Der Firefox mags. ;-) Leider mein spezieller Freund namens Internet Explorer nicht. Der zeigt mir nämlich Inhalte aus dem Fussbereich im Inhalt an. Hab schon ein paar Varianten mit clear probiert und auch mal overflow gesetzt, aber nichts hat die gewünschte Lösung gebracht.
Kann mir jemand helfen?
Hier die Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>| quarzus.de |</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="javascript.js" type="text/javascript"></script>
</head>
<body onload="bildwechsel();">
<div id="kopfbereich">
<div id="globalnavigationoben">Startseite | Tour | Hilfe | Sitemap | AGB | Impressum</div>
<div id="wechselbildoben"><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /></div>
<div id="hauptnavigation"> </div>
</div>
<div id="inhalt">
<div id="linkerinhaltcontainer">
<div id="linkerinhalt"> </div>
</div>
<div id="rechterinhaltcontainer">
<div id="rechterinhalt"> </div>
</div>
</div>
<div id="clearing"> </div>
<div id="fussbereich">
<div id="wechselbildunten"><img src="bilder/quarzus_sms_kopf_noreplaceweiss.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_noreplaceweiss.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /></div>
<div id="globalnavigationunten">Startseite | Tour | Hilfe | Sitemap | AGB | Impressum</div>
</div>
</body>
</html>
Und hier das Stylesheet:
body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
text-align: center;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
}
#kopfbereich {
position: relative;
width: 770px;
height: 200px;
margin: auto;
background-repeat: no-repeat;
}
#globalnavigationoben {
position: absolute;
left: 0px;
top: 10px;
width: 765px;
padding-right: 5px;
text-align: right;
color: #999999;
}
#wechselbildoben {
position: absolute;
left: 250px;
top: 30px;
width: 520px;
height: 150px;
background-image: url(./bilder/quarzus_sms_kopf_hintergrund_wolken.jpg);
}
#wechselbildoben img {
vertical-align: bottom;
}
#hauptnavigation {
position: absolute;
left: 0px;
top: 190px;
width: 765px;
padding-right: 5px;
text-align: right;
color: #999999;
}
#inhalt {
position: relative;
width: 765px;
height: 200px;
margin: auto;
margin-top: 20px;
padding-right: 5px;
}
#linkerinhaltcontainer {
float: left;
width: 235px;
background-image: url(./bilder/quarzus_sms_inhalt_linkerinhaltoben.gif);
background-repeat: no-repeat;
background-color: #F0F0F0;
}
#linkerinhalt {
height: 400px;
background-image: url(./bilder/quarzus_sms_inhalt_linkerinhaltunten.gif);
background-position: bottom;
background-repeat: no-repeat;
}
#rechterinhaltcontainer {
float: right;
width: 510px;
background-image: url(./bilder/quarzus_sms_inhalt_rechterinhaltoben.gif);
background-repeat: no-repeat;
background-color: #F0F0F0;
}
#rechterinhalt {
height: 400px;
background-image: url(./bilder/quarzus_sms_inhalt_rechterinhaltunten.gif);
background-position: bottom;
background-repeat: no-repeat;
}
#clearing {
clear: both;
overflow: hidden;
}
#fussbereich {
position: relative;
width: 770px;
margin: auto;
padding-top: 20px;
}
#wechselbildunten {
position: absolute;
left: 250px;
width: 520px;
height: 100px;
background-image: url(./bilder/quarzus_sms_kopf_hintergrund_wolken.jpg);
}
#wechselbildunten img {
vertical-align: bottom;
}
#globalnavigationunten {
position: absolute;
left: 0px;
top: 125px;
width: 765px;
padding-right: 5px;
padding-bottom: 20px;
text-align: right;
color: #999999;
}
zu finden ist das ganze auch noch live unter:
www.quarzus.de
-
Hallo Mario
Soweit so gut. Der Firefox mags. ;-) Leider mein spezieller Freund namens Internet Explorer nicht.
Also bei mir sieht es im IE nicht anders aus, als im Firefox.
Ich frage mich allerdings, wozu du so viele Divs benötigst.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hey Detlev,
doch, mein IE 7 zeigt die unteren Wolken in der Mitte des rechten grauen Kastens an, während de Firefox die unteren Wolken unterhalb der grauen Kästen anzeigt.
Wenn Du mir nen Tip gibst, wie ich ohne die divs auskommen kann, bin ich dir durchaus dankbar. ich dachte es wäre die einzige Möglichkeit, geordnet zu positionieren und auch zu layouten.
viele Grüße,
Mario-
Hallo Mario
doch, mein IE 7 zeigt die unteren Wolken in der Mitte des rechten grauen Kastens an, während de Firefox die unteren Wolken unterhalb der grauen Kästen anzeigt.
Mit einem IE 7 kann ich leider nicht testen. Ich kann mir aber kaum vorstellen, dass dieser nicht in der Lage sein sollte nach gefloateten Elementen wieder zu clearen. Vielleicht gefallen ihm die vielen
position:...nicht oder XHTML 1.1 als Dokumenttyp.Wenn Du mir nen Tip gibst, wie ich ohne die divs auskommen kann, bin ich dir durchaus dankbar. ich dachte es wäre die einzige Möglichkeit, geordnet zu positionieren und auch zu layouten.
Ganz ohne Divs muss ja nicht sein, zum Gruppieren von Elementen sind sie ja auch angemessen, es sollten aber _immer_ zuerst passende Elemente Verwendung finden.
So würde ich die Navigation als Liste auszeichnen, statt in ein Div zu pressen, und diese dann wie gewünscht formatieren.
Auch brauchst du kaum die vielen absoluten Positionierungen,margin,floatundclearpassend angewand dürften vollständig ausreichen.
Dazu schau dir mal an, was mit deiner Navigation passiert, wenn du im Firefox die fast unleserlich kleine Schrift vergrößerst.Die Wechselbilder sehen auch nicht wirklich toll mit den ausgefransten runden Ecken aus. Ich würde keine Bilder ins HTML schreiben, sondern die Rahmen gleich auf das Wolkenbild mahlen, wobei sauberere Rundungen möglich sind. Mittels Javascript wäre es dann möglich, einfache viereckige Elemente zu erzeugen, die das Bild dann an den gewünschten Stellen abdecken.
Ach, noch etwas:
Statt<body onload="bildwechsel();">kannst du auchwindow.onload=bildwechsel;im Javascript verwenden.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
danke für Deine Antwort. Hmm, die Idee mit den ausgefransten Kästchen ist echt genial, danke, da bin ich selbst nicht drauf gekommen, ist aber echt mal klasse.
Hab mir auch mal dein Einwand mit der Schrift angeschaut. Muss mir noch ne Lösung überlegen, aber auch hier bin ich Dir für den Tip dankbar. Selber sieht man sowas nicht.
Und ich hatte heute das Glück, mit einem IE6 testen zu dürfen - und siehe da - dort sieht alles prima aus. Nur bringt mich das momentan nicht weiter, der IE7 stellt die unteren Wolken mitten im grauen Kasten dar (so, als ob man im FF oder IE6 das clear weglassen würde) und ich hab immer noch keine Ahnung, wie ich das hinkriegen soll.
viele Grüße,
MarioHallo Mario
doch, mein IE 7 zeigt die unteren Wolken in der Mitte des rechten grauen Kastens an, während de Firefox die unteren Wolken unterhalb der grauen Kästen anzeigt.
Mit einem IE 7 kann ich leider nicht testen. Ich kann mir aber kaum vorstellen, dass dieser nicht in der Lage sein sollte nach gefloateten Elementen wieder zu clearen. Vielleicht gefallen ihm die vielen
position:...nicht oder XHTML 1.1 als Dokumenttyp.Wenn Du mir nen Tip gibst, wie ich ohne die divs auskommen kann, bin ich dir durchaus dankbar. ich dachte es wäre die einzige Möglichkeit, geordnet zu positionieren und auch zu layouten.
Ganz ohne Divs muss ja nicht sein, zum Gruppieren von Elementen sind sie ja auch angemessen, es sollten aber _immer_ zuerst passende Elemente Verwendung finden.
So würde ich die Navigation als Liste auszeichnen, statt in ein Div zu pressen, und diese dann wie gewünscht formatieren.
Auch brauchst du kaum die vielen absoluten Positionierungen,margin,floatundclearpassend angewand dürften vollständig ausreichen.
Dazu schau dir mal an, was mit deiner Navigation passiert, wenn du im Firefox die fast unleserlich kleine Schrift vergrößerst.Die Wechselbilder sehen auch nicht wirklich toll mit den ausgefransten runden Ecken aus. Ich würde keine Bilder ins HTML schreiben, sondern die Rahmen gleich auf das Wolkenbild mahlen, wobei sauberere Rundungen möglich sind. Mittels Javascript wäre es dann möglich, einfache viereckige Elemente zu erzeugen, die das Bild dann an den gewünschten Stellen abdecken.
Ach, noch etwas:
Statt<body onload="bildwechsel();">kannst du auchwindow.onload=bildwechsel;im Javascript verwenden.Auf Wiederlesen
Detlef-
Hallo Mario,
bitte zitiere sinnvoll. Lösche bitte alles weg, worauf du dich nicht direkt beziehst.
Hab mir auch mal dein Einwand mit der Schrift angeschaut. Muss mir noch ne Lösung überlegen, aber auch hier bin ich Dir für den Tip dankbar. Selber sieht man sowas nicht.
Wenn du nicht unnotigerweise absolut positionierst, dann dürfte sich dieses Problem von allein beseitigen.
... der IE7 stellt die unteren Wolken mitten im grauen Kasten dar (so, als ob man im FF oder IE6 das clear weglassen würde) und ich hab immer noch keine Ahnung, wie ich das hinkriegen soll.
Gib zum testen den Elementen (#inhalt, #clearing, #fussbereich, ...) unterschiedliche Hintergrundfarben oder/und border, so solltest du herausbekommen, wo genau es nicht passt.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-