DIVs unter Mozilla

Hallo zusammen,

ich würde auf meiner Internetseite gerne ohne
"blinde" Tabellen zur Strukturierung auskommen.
Ich wollte das den Kopfbereich mit DIVs lösen
jedoch bekomme ich das unter Mozilla nicht hin.

<div style="position:absolute; left:0px; top:0px; width:100%; height:30px; padding:10px;">Test</div>

Dabei entstehen unschöne Scrollbars.

Hat jemand eine Idee wie ich das umgehe.
Sollte auf jeden Fall auf Mozilla und IE
laufen.

Bye Peter.

AJ

Wenn Scrollbars erscheinen, dann solltest du mal über die Größe des DIVs nachdenken oder über die Größe des Paddings. Möglicherweise hat er auch Probleme mit der width:100% - Angabe.

@AJ,

genau das ist das Problem.
Mozilla addiert das padding zu dem width Wert.
Dadurch ist das DIV anschließend
größer als das eigendliche Fenster.

Beim IE geht es komischerweise.

Daher wollte ich wissen ob es nicht eine andere
Möglichkeit gibt mein Problem zu lösen.

Trotzdem danke für die schnelle Antwort.

Bye Peter.

MORL

Ich kann dir aber nur ans Herz legen die Styles in einer extra Datei anzugeben und nicht direkt im Quelltext. Das macht das ganze wesentlich übersichtlicher.
Wenn du gar keine Scrollbalken willst kannst du die über die Eigenschaft "overflow" ausschalten (overflow: none).

AJ

@Peter
Ginge das ganze nicht auch mit margin??

Der Tipp von MORL ist übrigens ganz gut. Mach dir eine .css-Datei und verlinke sie in der HTML-Datei.

@euch,

ja eine extra .css Datei habe ich auch.
Hab das nur zur Demonstration so geschrieben.

Werd ich gleich mal probieren.

Bye Peter.

morph3us

Hallo,

___Peter schrieb:

Beim IE geht es komischerweise.

Ja, weil dieser Code-Muell es *falsch* interpretiert. [1]

Das ganze nennt sich 'CSS Box Model' und der Gecko-Engine, sprich Mozilla, interpretiert dies richtig und der M$ IE, wie bei vielen, vielen anderen Sachen, falsch.

Dank dem M$ IE ist es noetig CSS Hacks [2] zu verwenden, damit es mit allen Browsern betrachtbar ist. Ein teilweise problemloserer Workaround ist es kein Seitenpadding bzw. keine Seitenraender bei Boxen zu verwenden, bei denen die definierte Breite wichtig ist.

[1] http://www.w3.org/TR/REC-CSS2/box.html
[2] http://www.tantek.com/CSS/Examples/boxmodelhack.html

MfG
morpheus