DIV OVERFLOW / IE & Mozilla?

[Christian Walgenbach]

Hallo,

habe eine Seite mit DIV und Overflow gebaut. Funktioniert im IE auch super. Leider wird die Scrollbar im Mozilla nicht angezeigt. Habe aber gelesen, dass es funktionieren soll. Was kann das sein?

URL: http://www.kanu-xxl.de (einfach mal durchsurfen)

[Klaus B.]

habe eine Seite mit DIV und Overflow gebaut. Funktioniert im IE auch super. Leider wird die Scrollbar im Mozilla nicht angezeigt. Habe aber gelesen, dass es funktionieren soll. Was kann das sein?

Deine Aussage ('Funktioniert im IE auch super') kann ich nicht nachvollziehen, denn genau der macht alles falsch, Mozilla rendert die Seite so wie Du es haben willst.

1. MSIE zeigz einen Scrollbalken des bodies der unnötig ist - typisches MSIE Poblem. Abhilfe: html, body {overflow:hidden;}

2. die Höhe Deines div's ist viel zu groß (100% im CSS, das entspricht in meinem aktuellen Browserfenster (Mozilla) 639px). setz die mal deutlich runter, so daß sie auch vollkommen im viewport dargestellt wird.

3. Achte bitte auch darauf, daß Angaben für padding, border und margin noch zu diesem Wert addiert werden (MSIE hat ein anderes Boxmodell).

MfG
Klaus

[Christian Walgenbach]

1. MSIE zeigz einen Scrollbalken des bodies der unnötig ist - typisches MSIE Poblem. Abhilfe: html, body {overflow:hidden}

-- habe das mal eingefügt. hoffe, dass es richtig ist.

2. die Höhe Deines div's ist viel zu groß (100% im CSS, das entspricht in meinem aktuellen Browserfenster (Mozilla) 639px). setz die mal deutlich runter, so daß sie auch vollkommen im viewport dargestellt wird.

-- habe es niedriger gesetzt. jetzt ist es aber im IE zu klein.

3. Achte bitte auch darauf, daß Angaben für padding, border und margin noch zu diesem Wert addiert werden (MSIE hat ein anderes Boxmodell).

-- das verstehe ich nicht ganz...

meine Änderungen sind unter http://www.kanu-xxl.de/test
zu sehen.

[Klaus B.]

1. MSIE zeigz einen Scrollbalken des bodies der unnötig ist - typisches MSIE Poblem. Abhilfe: html, body {overflow:hidden}
   -- habe das mal eingefügt. hoffe, dass es richtig ist.

»»
Hat ja auch geholfen!

2. die Höhe Deines div's ist viel zu groß (100% im CSS, das entspricht in meinem aktuellen Browserfenster (Mozilla) 639px). setz die mal deutlich runter, so daß sie auch vollkommen im viewport dargestellt wird.
   -- habe es niedriger gesetzt. jetzt ist es aber im IE zu klein.

nicht nur im MSIE, auch im Mozilla! Du hast eben übertrieben, aber es ist deutlich geworden, das auch daieses hilft.

3. Achte bitte auch darauf, daß Angaben für padding, border und margin noch zu diesem Wert addiert werden (MSIE hat ein anderes Boxmodell).
   -- das verstehe ich nicht ganz...

Gib zunächst mal dem Element den Rahmen und die Hintergrundfarbe, welches auch mit overflow:auto; ausgezeichnet ist, das schein ja noch irgendein Elternelement zu sein, was immer noch größer ist.
Ansonsten, zu dem was Du nicht verstanden hast:
Die Werte, die Du für width und height angibst beziehen sich nach dem Standard-Boxmodell auf den Inhalt (engl. content) des Elementes. Hat dieses noch padding, border oder margin, dann werden diese Werte addiert und das Element braucht insgesamt mehr Platz als Du erwartest.
Ich vermute, das ist der Grund, warum das Ekement mit dem gekben Rahmen unten aus dem viewport hinausragt.

Ich muß allerdings sagen, auf Deinen Quelltext habe ich nur einen flüchtigen Blick geworfen. Ich bin nicht so masochistisch veranlagt, als daß ich das Fenster nicht sofort wieder geschlossen hätte. Schmeiß mal alle veralteten Tags wie <font> und <strong> etc. raus.
Und Tabellen brauchst Du auch nicht um Dein Design zu realisieren.

MfG
Klaus

[at]

Hallo.

Schmeiß mal alle veralteten Tags wie <font> und <strong> etc. raus.

<strong> ist sicher nicht veraltet, und herausgeschmissen gehört es so oder so nicht. -- Da müht man sich ab, sematische Auszeichnung zu predigen, und dann so etwas :-(
MfG, at