nicht angemeldet
komisches (?) Verhalten bei Mozilla und DIV-Block
Hi,
ich habe ein absolut positioniertes DIV-Element, welches keine Breitenangaben enthält. Dieses DIV-Element enthält ein weiteres absolut positioniertes DIV-Element, welches Farb- und Paddingangaben und einen Text enthält:
<div style="position:absolute;left:10px;top:10px;">
<div style="position:absolute;left:0px;top:0px;background-color:#ffcc00;padding:10px">
Beispieltext
</div>
</div>
Alle Browser (die ich testen konnte: IE 5/6, Opera 5-7, Netscape 4) zeigen einen Bereich an, der sich der Breite und Höhe des Textes automatisch anpasst. Nur Mozilla macht es nicht. Er zeigt nur einen kleinen Bereich des inneren DIVs an, und zwar färbt er nur den Padding-Bereich ein. Die Breite des Textes berücksicht er nicht.
Wenn ich die Breite des inneren DIVs mit JavaScript abfrage, dann ist diese auch entsprechend klein. Mit der Höhe gibt es keine Probleme.
Hier das Beispiel: (der gelbe Bereich sollte sich dem Text anpassen)
<iframe src="http://www.abi01-wrg.de/test.html" width="90%" height="90%">http://www.abi01-wrg.de/test.html</iframe>
Macht Mozilla es richtig (dafür ist er ja bekannt), oder machen die anderen es richtig (Opera 7 ist ja auch bekannt für korrekte CSS-Interpretation)?
Wie ist dieses Verhalten zu erklären??
Benutze ich für das innere DIV "relative" oder "static", dann klappts auch in Mozilla. Ich muss/will aber absolute benutzen.
Als einzigste Lösung habe ich durch ausprobieren herausgefunden, dass man im äußeren DIV "overflow:auto" notieren kann, damits klappt!? Ist das die einzigst sinnvolle und logische Lösung?
Oder gibts ne bessere??
Gruß
Scooter!
-
hallö,
Wie ist dieses Verhalten zu erklären??
ich denke mal so: "Um den Effekt zu vermeiden, können Sie z.B. Angaben zu width (Breite) des positionierten Bereichs machen." alos zb. mit 'width:100%;' http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position.
Macht Mozilla es richtig (dafür ist er ja bekannt), oder machen die anderen es richtig (Opera 7 ist ja auch bekannt für korrekte CSS-Interpretation)?
ich schätze, mein geliebter moz macht es falsch :-(
weil: 'auto' sollte er ja _auto_matisch erkennen...grüße aus Leipzig
willie.de--
sh:( fo:| ch:? rl:° br:> n4:# ie:% mo:) ls:# va:} de:] zu:) fl:( js:| ss:(
http://peter.in-berlin.de/projekte/selfcode/ -
Hallo,
Ich muss/will aber absolute benutzen.
kannst du uns das erklären?
denn für dein beispiel bräuchtest du kein äußeres <div>
welchen effekt - was genau willst du erreichen?mfg NAG
--
signatur-
Hallo,
Ich muss/will aber absolute benutzen.
kannst du uns das erklären?
Wenn ich relative oder static nehme, dann klappts unter Opera 5 nicht mehr.
denn für dein beispiel bräuchtest du kein äußeres <div>
welchen effekt - was genau willst du erreichen?Ich habe das ja auch nur vereinfacht.
Ich arbeite an einem DHTML-Menu. Man soll dann später wählen, ob der INhalt automatisch angepasst wird oder ob man eben Breitenangaben macht.
Bei width-Angaben hätte ich wieder mit dem Box-Model-Bug in verschiedenen Browsern zu kämpfen, der beim padding auftritt.Außerdem besteht mein Menus aus einem äußeren DIV, der weitere DIVs enthält (Menupunkte).
Gruß
Scooter-
Hallo,
Bei width-Angaben hätte ich wieder mit dem Box-Model-Bug in verschiedenen Browsern zu kämpfen, der beim padding auftritt.
hmm ...lass bei den inneren <div> position ganz weg und positioniere die sie mit margin
beispiel:
<div style="position:absolute;left:10px;top:10px; border:1px solid black;">
<div style="background-color:#ffcc00;padding:10px; margin-bottom:5px;">
menu punkt 01
</div>
<div style="background-color:#ffcc00;padding:10px; margin-bottom:5px;">
menu punkt xx
</div>
</div>mfg NAG
--
signatur
-
-
-
Hi,
noch ein kleiner Nachtrag:
Als einzigste Lösung habe ich durch ausprobieren herausgefunden, dass man im äußeren DIV "overflow:auto" notieren kann, damits klappt!? Ist das die einzigst sinnvolle und logische Lösung?
Das wäre zwar eine Läsung für Mozilla, aber dann klappts irgendwie in IE nicht mehr. Der zeigt dann gar nichts mehr an.
Habt ihr nicht ne Lösung, wie man das in allen Browsern richtig machen kann??
"static" oder "relative" würde unter Opera 5 nicht funktionieren.
Scooter