Einfaches Design mit CSS - Text verlässt CSS Div

alphanumeric · 14.03.2005, 18:47

Hallo,

hab mal eben für die Schule ein einfaches auf Css aufgebautes Design gebastelt. Jetzt hab ich aber das Problem ... das im Content-Bereich der Text die Box verlässt und ich hab keine Ahnung warum - oder wie ich das in den Griff bekommen sollte.

Interessant ist ausserdem das Internet Explorer 6.0 die Seite richtig darstellt ... Firefox jedoch nicht!

Hier ist mal die Seite

Klick!

die Css-Datei ist im selben Ordner und heisst style.css

Bitte um rasche Hilfe!

Quaese · 14.03.2005, 20:38

Hi,

das Problem ist der Box-Model-Bug - mehr dazu hier .

Der IE rechnet die padding-Wert in die Breitenangabe ein, andere Browser dagegen
rechnen sie hinzu. So kommt es dazu, dass der Text über die Grenzen hinausläuft.

Abhilfe schaffst du, indem du die padding-Werte aus dem CSS zum DIV mit der
ID contentmitte entfernst. Weiterhin bettest du ein zusätzliches Div in
das Element (id="contentmitte") ein, mit dem du die gewünschten padding-
Werte realisierst.

HTML-Code:

<div id="contentmitte">
  <div style="padding: 5px 15px 5px 20px;">
    Das MultiAugustinum hat in den letzten Jahren eine rasche ...
  </div>
</div>

Ciao
Quaese

alphanumeric · 15.03.2005, 00:08

das haut hin ... thx a lot!

Boris · 15.03.2005, 02:03

Nimm das hier mal raus: <?xml version="1.0"?>

Dann läuft der IE6 auch im Normalmodus und hat den Boxmodel-Fehler nicht. Die Lösung von Quaese funktioniert zwar, benötigt aber ein weiteres DIV - und das muss nicht sein.

Eine bessere Lösung ist es, wenn man eine der diversen CSS Boxmodel Hacks einbaut (brauchst Du für den IE5 und 5.5). Google wird Dir da helfen