nicht angemeldet
position:relative und overflow bei IE 7 / Firefox 1.0.1
Hallo Leute,
ich hab bei dem div-Container mit folgenden Angaben
<div style="position:relative; top:10px; max-height:50%; width:800px; border:1px solid red; overflow:auto; text-align:center">
<!-- Inhalt -->
</div>
das Problem, dass sowohl IE 7 als auch Firefox 1.0.1 bei übergroßem Inhalt "max-height" nicht beachtet und "overflow:auto" nicht wie gewünscht interpretiert und den Container auf die Größe des Inhalts aufbläst. "overfolw:visible" und "overflow:hidden" führen zum selben Ergebnis, "overflow:scroll" funktioniert, allerdings bauen beide Browser in diesem Fall sowohl horizontale als auch vertikale SCrollbars ein, was irgendwie blöd aussieht...
Hat sich da in meinem Code der Fehlerteufel eingeschlichen? Oder ist das ein bekanntes Problem dieser beiden Browser?
Vielen Dank schon im VOraus für eure Hilfe!
Viele Grüße, Lupo
-
Hallo Lupo,
das Problem, dass sowohl IE 7 als auch Firefox 1.0.1 bei übergroßem Inhalt "max-height" nicht beachtet und "overflow:auto" nicht wie gewünscht interpretiert und den Container auf die Größe des Inhalts aufbläst.
max-height ist die *maximale* Höhe. Wenn du einen dynamischen Container möchtest darfst du auch nicht max-height verwenden.
Grüße,
Jochen
-
Hi Jochen,
danke erstmal für deine Antwort!
Ich merke gerade, dass ich mein Problem nicht ganz klar ausgedrückt hab...Auf der Homepage sollen 3 Container mit fester Breite auftauchen, der obere und der untere mit festen Höhenangaben. Die Höhenangabe des mittleren soll dazu führen, dass der User auch bei einer geringeren Höhe des gesamten zur Verfügung stehenden Anzeigebereichs nicht zum unteren Frame scrollen muss.
Außerdem sollen die Container bei jeder Anzeigebreite in der Mitte stehen.Ich geb hier mal den ganzen Code der Datei an:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>WildScream - Heavy Metal from Munich</title>
<link rel="stylesheet" type="text/css" href="format.css">
<style type="text/css"></style></head>
<body style="text-align:center; background-color:black; scrollbar:no;"><div style="position:relative; height:80px; width:800px; border:1px solid green; text-align:center;">
<a href="home.html" style="position:absolute; left:3%; top:20%; width:10%; height:60px; border:1px solid red; text-align:center;"><p style="position:absolute; top:20px; left:30%; font-size:20px;">Home</p></a><br>
<a href="band.html" style="position:absolute; left:17%; top:20%; width:10%; height:60px; border:1px solid blue; text-align:center;"><img src="pics/buttons/band.jpg" style="width:100%; height:100%;"></a>
<a href="dates.html" style="position:absolute; left:31%; top:20%; width:10%; height:60px; border:1px solid green; text-align:center;">Dates</a>
<a href="gallery.html" style="position:absolute; left:45%; top:20%; width:10%; height:60px; border:1px solid red; text-align:center;">Gallery</a>
<a href="media.html" style="position:absolute; left:59%; top:20%; width:10%; height:60px; border:1px solid blue; text-align:center; font-size:120%">Media</a>
<a href="interactive.html" style="position:absolute; left:73%; top:20%; width:10%; height:60px; border:1px solid green; text-align:center;"><img src="pics/100_2654.jpg" style="width:100%; height:100%;"></a>
<a href="impressum.html" style="position:absolute; left:87%; top:20%; width:10%; height:60px; border:1px solid green; text-align:center; font-size:100%">Impressum/<br>Disclaimer</a>
</div><div style="position:relative; top:10px; max-height:50%; width:800px; border:1px solid red; overflow:visible; text-align:center">
<!--Inhalt-->
</div>
</body>
</html>
den unteren Container hab ich noch nicht mit drin, nicht wundern ;-)
IE 7 richtet mit diesem Code die Container horizontal mittig aus, Firefox 1.0.1 leider nicht...Mein Hauptproblem ist aber jetzt folgendes:
Der Code wie oben angegeben bewirkt, dass zumindest IE die Container so ausrichtet wie ichs will, allerdings wird der zweite Container bei übergroßem Inhalt nicht mit Scrollbars ausgestattet, sondern auf die Größe des Inhalts ausgedehnt, was ich nicht will.
Wenn ich im zweiten Container angebe "position:absolute", dann richten beide Browser die linke Kante des Containers mittig aus, daher ist der Container viel zu weit rechts. Dafür interpretieren beide die Angabe "overflow:auto" so wie ichs haben will, nämlich mit einer vertikalen Scrollbar.Ich versuche mit diesem Site-Aufbau, nicht nur für eine bestimmte Größe des Anzeigebereichs zu schreiben. Ist das mit dieser Methode überhaupt möglich?
Wieder freu ich mich auf hilfreiche Antworten auf eine Newbie-Frage... ;-) Danke schonmal!
Gruß Lupo.
-
Hallo Lupo,
Auf der Homepage sollen 3 Container mit fester Breite auftauchen, der obere und der untere mit festen Höhenangaben. Die Höhenangabe des mittleren soll dazu führen, dass der User auch bei einer geringeren Höhe des gesamten zur Verfügung stehenden Anzeigebereichs nicht zum unteren Frame scrollen muss.
Also ein feststehender footer? Vielleicht hilft dir http://www.alistapart.com/articles/footers weiter. Aber so ganz habe ich es nicht verstanden, sorry.
Grüße,
Jochen
-
-