✔ DIV-Container

Status
Nicht offen für weitere Antworten.
P

pkaestner

Grünschnabel
Hallo Community,

ich arbeite bei meiner Homepage gern mit DIV-Containern, um Grafiken genau dorthin zu platzieren, wo ich Sie haben will. Die Eigenschaft "position" erhält den Wert "absolute", "top" und "left" werden in Pixel (z.B. 100px) angegeben. Leider interpretiert jeder gängige Browser (Firefox, IE, Opera, Netscape) diese Angaben unterschiedlich, so dass die Grafiken meistens leicht, manchmal aber auch so weit verschoben sind, dass sie überlappen. Das gefällt mir nicht (Purist). Gibt es Positionierungsangaben, die alle Browser gleich interpretieren?

Peter
 
Hi,

zeig doch bitte mal den Quellcode, denn normalerweise werden die Positionsangaben von den Browsern einheitlich interpretiert.
 
Verzichte auf die absolute Positionierung und verwende lieber "float" um die Boxen nebeneinander zu positionieren. Ist viel zuverlässiger als die von dir derzeit verwendete Methode.
 
Wer sagt dir denn, dass die Elemente nebeneinander positioniert werden sollen, und was ist bitte an einer absoluten Positionierung unzuverlässig? :suspekt:
 
pkaestner hat gesagt.:
Hallo Community,

ich arbeite bei meiner Homepage gern mit DIV-Containern, um Grafiken genau dorthin zu platzieren, wo ich Sie haben will. Die Eigenschaft "position" erhält den Wert "absolute", "top" und "left" werden in Pixel (z.B. 100px) angegeben. Leider interpretiert jeder gängige Browser (Firefox, IE, Opera, Netscape) diese Angaben unterschiedlich, so dass die Grafiken meistens leicht, manchmal aber auch so weit verschoben sind, dass sie überlappen. Das gefällt mir nicht (Purist). Gibt es Positionierungsangaben, die alle Browser gleich interpretieren?

Peter
Zum Vergrößern anklicken....
Vielen Dank für die Hilfe! Maiks Vorschlag, margin und padding erst mal zurückzusetzen, hat das Problem allein noch nicht gelöst. Aber mit Threadi's Idee, statt der Absolutpositionierung float zu verwenden, war ich erfolgreich. Wenn Ihr Lust habt, schaut euch das Ergebnis mal an unter http://www.naturbad-hasbergen.de, gleich auf der Startseite. War zwar ein ziemliches Jonglieren mit margin, padding und hspace, weil zwischen den Grafiken immer wieder Text auftauchte, der dort nicht hingehört, aber egal: jetzt stellen alle Browser die Seite gleich dar. Auch habe ich mich mit dem Lineal davon überzeugt, dass für alle Browser ein Pixel die gleiche Maßeinheit ist, und trotzdem: Warum ist die Textbox unter dem Adventskranz bei IE immer noch schmaler als bei Firefox, Opera und Netscape? Kann das daran liegen, dass ich mit frames arbeite?

Hier der Quelltext:
in style sheet:
#weih {
float:left;
margin-left:50px;
padding-right:0px;
padding-top:25px;
margin-top:0px;
}

und im body:

<div id="weih">
<img src="bilderhome/weihnachten.jpg" alt="Weihnachtsgru&szlig;" vspace="5" width="312" height="253">

<p class="textabsatz" style="width: 280px; margin-left: 0px; margin-right: 0px; font-family:verdana; font-size: 14pt; text-align: left;">
Der Naturbad Hasbergen e.V. wünscht allen Hasberger B&uuml;rgerinnen und B&uuml;rgern eine friedvolle Adventszeit und frohe Weihnachten, verbunden mit unserem herzlichsten Dank für die Unterst&uuml;tzung, die wir auch in diesem Jahr erfahren haben.
</p>
</div>
 
Hi,

mit dem von dir gewählten Doctype

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
wird das Dokument im Quirksmodus übergeben, und in diesem Darstellungsmodus interpretiert der IE das Boxmodell falsch.

Konkret adddiert er nicht den linken und rechten Innenabstand à 20px zur Breitenangabe hinzu, weshalb er die Box 40px schmäler darstellt, als die übrigen Browser.

Mit dem folgenden Dokumenttyp wird das Dokument im Standardsmode übergeben, und der Textabsatz im IE wie gewünscht dargestellt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
 
Maik hat gesagt.:
Hi,

mit dem von dir gewählten Doctype

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
wird das Dokument im Quirksmodus übergeben, und in diesem Darstellungsmodus interpretiert der IE das Boxmodell falsch.

Konkret adddiert er nicht den linken und rechten Innenabstand à 20px zur Breitenangabe hinzu, weshalb er die Box 40px schmäler darstellt, als die übrigen Browser.

Mit dem folgenden Dokumenttyp wird das Dokument im Standardsmode übergeben, und der Textabsatz im IE wie gewünscht dargestellt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
Zum Vergrößern anklicken....
Herzlichen Dank, Maik!
Ich bin ein vollständiger HTML-Autodidakt und wäre von selbst nie auf diese Lösung gekommen. Von irgendjemanden habe ich diesen DOCTYPE übernommen und mir nichts Böses dabei gedacht. Ich werde das entsprechend ändern.
Aber, da ich denselben DOCTYPE auf allen Seiten verwende: besteht nicht die Gefahr, dass zwar das geschilderte Problem behoben ist, dafür aber an anderer Stelle völlig neue überraschende Effekte auftreten? Ist am Ende die falsche Addition der Innenabstände bei IE das kleinere Übel?

Gruß, Peter
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück