nicht angemeldet
Fehlender Rahmen & falsche Größe bei IE
Hallo!
Ich habe eine Seitenstruktur, die der am Ende des Beitrags entspricht. Dabei sollen zwei Boxen nebeneinander stehen, die 3. und die 4. jeweils untereinander darunter. Oben und unten befinden sich Header und Footer, das alles ist eingebettet in einem äußeren DIV. Dieses hat als linke und rechte Grenze die Farbe des Headers und des Footers, sodass eine Art Rahmen entsteht.
So weit, so gut. Firefox 1.0 und Opera 7.54 zeigen die Seite richtig an, d.h. die Rahmen durchgehend und die äußerenen Rander der inneren DIVs auf gleicher Höhe.
Nur der IE 6.0 tut dies nicht. Die beiden untereinanderliegenden DIVs beginnen und enden etwas weiter außen als die nebeneinanderliegenden, und sobald ich anfange zu scrolle, wird der seitliche Rahmen unterbrochen.
Wäre super, wenn jemand sich die Seite ansehen konnte (den HTML-Code einfach rauskopieren, er enthält alles wesentliche) und mir einen Tipp geben könnte, wie ich das Problem lösen kann.
Danke schon mal
Martin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<style type="text/css">
<!--
div h2 {
font-size: 1.2em;
background-color: rgb(220, 220, 255);
margin: 0;
}
div#page {
padding: 0;
margin-left: 1em;
margin-right: 1em;
margin-top: 0;
margin-bottom: 0;
border-left: 0.2em solid rgb(128, 128, 150);
border-right: 0.2em solid rgb(128, 128, 150);
}
div#header {
text-align: center;
background-color: rgb(128, 128, 150);
color: rgb(255, 255, 220);
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
div#footer {
text-align: center;
background-color: rgb(128, 128, 150);
color: rgb(255, 255, 220);
margin-left: 0;
margin-right: 0;
margin-top: 1em;
margin-bottom: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
div.overflow { /*fixe Größe für Abschnitte*/
height: 20em;
overflow: auto;
}
div#box1 {
margin-left: 0.3em;
margin-right: 0;
margin-top: 0;
margin-bottom: 1em;
padding: 0;
border: 1px solid black;
font-size: 0.8em;
float: left;
width: 47%;
}
div#box2 {
margin-left: 0;
margin-right: 0.3em;
margin-top: 0;
margin-bottom: 1em;
padding: 0;
border: 1px solid black;
font-size: 0.8em;
float: right;
width: 47%;
}
div#box3 {
clear: both;
margin-left: 0.3em;
margin-right: 0.3em;
margin-top: 0;
margin-bottom: 0;
padding: 0;
border: 1px solid black;
font-size: 0.8em;
}
div#box4 {
clear: both;
margin-left: 0.3em;
margin-right: 0.3em;
margin-top: 0;
margin-bottom: 0;
padding: 0;
border: 1px solid black;
font-size: 0.8em;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="header">
Header
</div>
<div id="box1">
<h2>
Titel
</h2>
<div class="overflow">
Inhalt, der gescrollt wird
</div>
</div>
<div id="box2">
<h2>
Titel
</h2>
<div class="overflow">
Inhalt, der gescrollt wird
</div>
</div>
<div id="box3">
<h2>
Titel
</h2>
<div class="overflow">
Inhalt, der gescrollt wird
</div>
</div>
<div id="box4">
<h2>
Titel
</h2>
<div class="overflow">
Inhalt, der gescrollt wird
</div>
</div>
<!-- Fussleiste -->
<div id="footer">
Fußleiste
</div>
</div>
</body>
</html>
-
Also bei mir tritt der gleiche Effekt ein wie bei dir. Aber du kannst das nicht verhindern, das ist einfach ein Darstellungsfehler des IE. Dagegen kannst du nichts tun.
PS: Mir gefällt das Design :-)
-
PS: Mir gefällt das Design :-)
Danke :)
Aber du kannst das nicht verhindern, das ist einfach ein Darstellungsfehler des IE. Dagegen kannst du nichts tun.
Das hatte ich befürchtet, aber gehofft, dass ein Workaround gibt (ohne die ganze Seitenstruktur zu ändern). Da die Anwendung primär im IE angesehen wird, wäre es schon nicht schlecht, wenn der Rand dort sichtbar wäre. Die unterschiedliche Breite ist weniger tragisch - die fällt ja kaum auf.
-
hi,
Aber du kannst das nicht verhindern, das ist einfach ein Darstellungsfehler des IE. Dagegen kannst du nichts tun.
Das hatte ich befürchtet, aber gehofft, dass ein Workaround gibt (ohne die ganze Seitenstruktur zu ändern).scheint ja eine abart des border chaos zu sein ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
Hmm, sehr seltsam. Montag morgen, und jetzt taucht das Problem mit der Border nicht mehr auf - dafür nimmt das Header-Element nicht mehr die volle Breite ein, sobald Scrollbars darunter sind.
Hach ja, es wird nie langweilig mit dem IE, aber ok, ich werde die Seite jetzt so lassen, wie sie ist, ich werde nicht das ganze Design ändern, nur weil eine Seite nicht so aussieht, wie sie sollte.