CSS:absolut pos. div größer als browser=>IE scrollt nicht

Beitrag von **easore** » 27.12.2004, 16:22

Hallo zusammen,

ich habe eine absolut positionierte div box, die größer ist als das browser fenster.

z.b. 700px hohe box wird im browser bei einer auflösung von 800 x 600 angeschaut, die box hat content, firefox stellt scrollbars zur verfügung, ie nicht und schneidet den inhalt einfach ab!

jemand eine idee?

danke im vorraus!

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von HW » 27.12.2004, 16:56

..hast Du den irgendwo ein overflow-hidden drin?
Poste doch mal den Code des Style Sheets.

Man kann auch als Trick eine 1pixel große Grafik mit der entsprechenden width einbauen. Das nutze ich schon mal um eine min-width im IE zu garantieren.

Beitrag von **easore** » 27.12.2004, 17:16

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td class="dot">.</td><td width="600"><div id="1" style="position&#58;relative; border&#58; 1px solid black;">

<div id="2" style="position&#58;absolute; top&#58;100px; left&#58;100px; width&#58;20px; border&#58; 1px solid black;">
con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  
</div>

</div></td><td class="dot">.</td></tr></table>
</body>
</html>

Die Tabelle habe ich zum zentrieren verwendet, und die div box id 1 um von ihr aus absolut positionieren zu können.

genau das ist das problem, der ie richtet sich beim scrollen nur nach der tabelle oder der box 1 und die haben für den wohl keinen content....

firefox (pc): einwandfrei
safari (mac): problem!
ie (mac): einwandfrei
ie (pc): problem!

wunderbar, nicht wahr....

von **Anzeige von ABAKUS** »

Beitrag von HW » 27.12.2004, 21:55

hier bei deinem Beispiel ist das Problem nicht zu erkennen. Und an den Smilie musst Du dich beim IE gewöhnen. Zumal alle Versionen des IE anders rendern.

Versuche mal: overflow:auto

dann müssten die Scrollbars auch im IE zu finden sein. Vielleicht arbeitet dann Opera nicht mehr richtig. Falls das der Fall ist, musst du einnen Hack einbauen.

Beitrag von **Maschenka** » 28.12.2004, 00:44

Bei overflow:auto hat man dann außer dem Scrollbalken am rechten Rand des Browserfensters noch einen zusätzlich am rechten Rand von div 2.

Sobald man bei div 1 das position:relative entfernt, zeigt auch der IE einen Scrollbalken an, gibt es von daher vielleicht eine andere Möglichkeit zur passenden Formatierung?

Beitrag von **easore** » 28.12.2004, 12:22

@Maschenke "Sobald man bei div 1 das position:relative entfernt, zeigt auch der IE einen Scrollbalken an, gibt es von daher vielleicht eine andere Möglichkeit zur passenden Formatierung?"

Wenn man das position:relative; entfernt, positioniert sich div 2 nicht mehr zentriert ausgehend vom umliegenden element (hier div 1) sondern ausgehen vom body, somit ist die zentrierung futsch.

Aber ich habs jetzt eine für mich akzeptable Lösung gefunden:
Einfach der Tabellenzelle, die zur Zentrierung gedacht ist, ein position:relative; geben, dann kann man sich auch div 1 sparen und es
ie (pc): scrollbalken & zentriert
ie (mac): scrollbalken & zentriert
safari (mac): keine scrollbalken, nicht zentriert
firefox (pc): scrollbalken & nicht zentriert

wenn ich das betrachte:
https://www.etracker.de/globalstat.php?type=1
kann ich mit dem ergebnis leben

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http&#58;//www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Test</title> 
</head> 

<body> 
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td class="dot">.</td><td width="600" style="position&#58;relative;">

<div id="2" style="position&#58;absolute; top&#58;100px; left&#58;100px; width&#58;20px; border&#58; 1px solid black;"> 
con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  con ten t  
</div> 

</td><td class="dot">.</td></tr></table> 
</body> 
</html>

Greetz!

Beitrag von **treo** » 28.12.2004, 13:28

Nun ich denke das dies nicht so die beste lösung ist für das was du machen willst ist es sinnvoller so einen code zu haben:

Code: Alles auswählen

...
<div style="margin-top&#58; 100px; margin-left&#58; 100px; width&#58; 20px; border&#58; 1px solid black">
lorem ipsum
</div>
...

wenn du bisschen genauer erklärst wie du das ganze genau haben willst kann ich vllt. einen passenderen coe machen