padding problem in mozilla browsern

Status
Nicht offen für weitere Antworten.

crashx

Erfahrenes Mitglied
Hallöe erst ma.

Ich habe einen DIV container in welchen Inhalt geschriben wird, das der text nicht am Container rand klebt, verwende ich den wert "padding: 4px;" oä.
Das alles ist kein Problem, nur wen ich 2 DIV Container nebeneinander habe,
wird in Mozilla Browsern der Container um den Wert grösser welchen ich als "padding" angebe. Im IE alles kein Problem.

Bsp.

HTML:
<div style="border: 0px; margin: 0px; padding: 4px; width: 100px; float: left">
hier irgend ein text
</div>
<div style="border: 0px; margin: 0px; padding: 4px; width: 100px; float: right">
hier noch ein text
</div>

Bei diesem verwendungsbereich, ist die gesammt grösse der 2 Container 200px; im IE
in Mozilla Browsern sind es insgesamt 216px;

Vielleicht könnte mir bei diesem Problem Jemand unter die Arme greiffen.

THX
 
Gemäß dem Boxmodell wird u.a. der Innenabstand einer Box zur Breitenangabe hinzuaddiert: (100px + 2*4px) *2 = 216px.

Wenn die Boxbreite 100 Pixel besitzen soll, dann müssen in der width-Angabe die 8 Pixel abgezogen werden ;)
 
Das Leuchtet mir auch ein.

Doch die Praxis zeigt mir anderes auf,
wen ich die breite als mit 84 definiere so das ich mit dem padding wert 100 erreiche,
sieht es in Mozilla Browsern gut aus, doch im IE sind es dan mit den padding werten immer noch 84px.
Ich hätte die möglichkeit via PHP eine Browser abfrage zumachen und für jeden Browser den Richtigen Wert in eine Variable zu übergeben, doch ich denke, es gibt eine siplere Lösung.
Doch die Lösung finde ich leider nicht.
 
Entweder verwendest du für die Seite keine Dokumenttyp-Deklaration, oder du hast eine gewählt, die den IE in den Quirksmodus versetzt, und er deshalb das Boxmodell falsch interpretiert ;)

Probiere es mal beispielsweise mit diesem Doctype:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
Status
Nicht offen für weitere Antworten.
Zurück