nicht angemeldet
DIV relativ positionieren
Hallo,
ich habe hier ein kleines Problem:
Ich möchte ein DIV-Bereich sowohl horizontal als auch vertikal relativ positionieren.
Im Firefox funkioniert das auch prima – im InternetExplorer aber eben nicht, hier wird der DIV-Bereich vertikal nicht korrekt verschoben.
Könnte mir jemand sagen woran das liegt?
Hier ein Test-Script:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<table width="390" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<div id="Layer1" style="position:relative; left:0px; top:0px; width:100px; height:100px;">
</div>
</td>
</tr>
</table></td>
</tr>
</table>
-
Im Firefox funkioniert das auch prima – im InternetExplorer aber eben nicht, hier wird der DIV-Bereich vertikal nicht korrekt verschoben.
<div id="Layer1" style="position:relative; left:0px; top:0px; width:100px; height:100px;">
Warum sollte sich ein Element verschieben, wenn die Verschiebung 0 ist?
-
Hallo Bla. Vielen Dank für Deine Antwort.
Warum sollte sich ein Element verschieben, wenn die Verschiebung 0 ist?
Es ist ja keine Verschiebung 0, sondern die Position zu der innenliegenden Tabelle ist null.
Im Bezug zum Elternelement soll sich die Position auch gar nicht verändern.
Die innere Tabelle liegt aber in einer äußeren Tabelle mit 100% Höhe und Breite.
Somit ändert sich die Position der inneren Tabelle, wenn ein Fenster in der Größe verändert wird.
Eigentlich müßte nach einer Änderung der Fenstergröße der DIV-Bereich immernoch oben links an der inneren Tabelle ausgerichtet sein, ist er aber nicht.-
hi,
Warum sollte sich ein Element verschieben, wenn die Verschiebung 0 ist?
Es ist ja keine Verschiebung 0,
position:relative gibt _immer_ eine Verschiebung zur urspünglichen Position eines Elementes an, die es ohne (relative) Positionierung einnehmen würde.
Diese Verschiebung kann natürlich auch in beide möglichen Richtigungen 0 betragen.sondern die Position zu der innenliegenden Tabelle ist null.
Das verstehe ich nicht.
Eigentlich müßte nach einer Änderung der Fenstergröße der DIV-Bereich immernoch oben links an der inneren Tabelle ausgerichtet sein, ist er aber nicht.
Auch hier kann ich nicht nachvollziehen, was du meinst.
Hättest du mal ein Online-Beispiel, sowie eine ausführlichere Beschreibung des beobachteten Verhaltens?gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
hier ist nochmal ein Test-Quellcode zur Veranschaulichung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle""><table width="390" height="300" border="0" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" bgcolor="#CCCCCC">
<div id="Layer1" style="position:relative; left:0px; top:0px; width:100px; height:100px; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"></div>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>Damit das Problem klar verständlich wird, habe ich den DIV-Bereich und die Tabelle gefärbt.
Anfangs lädt der Browser den DIV-Bereich an die richtige Stelle.
Ändere ich die Fenstergröße, müßte der DIV-Bereich weiterhin in der linken oberen Ecke der grauen Tabelle verbleiben. Tut er aber nicht.
Im Firefox beispielsweise funktioniert es ja auch, nur nicht im IE6.Natürlich benötige ich das für Layoutzwecke. Das die innere Tabelle mittig in einer fensterabhängien Tabelle liegt, reicht zur Verdeutlichung des Problemes ja aus, oder?
-
-
<div id="Layer1" style="position:relative; left:0px; top:0px; width:100px; height:100px;">
Warum sollte sich ein Element verschieben, wenn die Verschiebung 0 ist?
Es ist ja keine Verschiebung 0, sondern die Position zu der innenliegenden Tabelle ist null.
Im Bezug zum Elternelement soll sich die Position auch gar nicht verändern.Dann wäre die Frage, warum du überhaupt position:relative einsetzt, wenn du dann doch nicht positionierst? (Ja, es gibt Gründe dafür, aber die Frage stelle ich trotzdem.) Nimmst du position:relative und die in jedem Fall überflüssigen left:0 und top:0 raus, funktioniert es auch im IE.
Und die beiden Tabellen nimmst du doch nicht etwa für Layoutzwecke?
Könnte mir jemand sagen woran das liegt?
Da verweise ich dann einfach mal auf Punkt 5, insbesondere dessen zweites Wort, in der Liste "Other bugs" von http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx.
Schalte in den standardkonformen Modus, der für CSS-Geschichten eh Pflicht sein sollte, und, sofern sich das Problem nicht wie oben geschrieben lösen lässt, ermuntere deine Besucher, zu einem nicht kaputten Browser zu wechseln - und wenn's nur der IE7 ist.
-
-