Darstellungsunterschiede IE / Mozilla

[Stefan Schulz]

Hallo Forum,

ich brüte gerade die 3. Nacht über einer CSS-Darstellungsgeschichte:

Im externen CSS ist folgendes definiert:

#head {background:#48018f; height:50px;position:absolute; top:20px; left:15px; width:100%; z-index:1; visibility:visible; }

und in der Seite dies:

<div id="head"></div>

Im IE 6.0 erscheint der erwartete 50px hohe Balken mit 15px Abstand von links über die geamte Bildschirmbreite. Der "Herr" Mozilla jedoch, dehnt es etwas über den rechten Rand hinaus aus, so daß eine horizontale Scrollbar entsteht.

*grübel* Bin ich nur zu doof und seh den Wald vor lauter Bäumen nicht oder was geht da schief?

Ich bin für jeden sachdienlichen Hinweis dankbar :-)

Grüße, Stefan S.

[nag]

Hallo,
Hier liegt das Problem:

#head {left:15px; width:100%; }

Der Mozilla (wie auch Opera) verschiebt deinen 100% breiten Header nach rechts und damit ist dein Body 100%+15px breit.

mfg NAG

[Stefan Schulz]

Hallo NAG,

Der Mozilla (wie auch Opera) verschiebt deinen 100% breiten Header nach rechts und damit ist dein Body 100%+15px breit.

Oh Mist, jetzt wo du es sagst :-( klingt logisch.
Ich bin halt absolut noch nicht der CSS-Crack.

Vielleicht noch ein kleiner Tipp, wie man das "umschiffen kann"?
Die 15px Abstand links müßten eigentlich schon sein.

Gruß, Stefan S.

[nag]

Und hier noch die Lösung:

<div style="position:absolute; left:0; top:20px; width:100%; background-color:red; color:#fff;">
<div style="margin-left:15px; background-color:blue; height:50px;"> </div>
</div>

Was du nicht vergessen darfst ist:

body {margin:0;padding:0;}

mfg NAG

[Ingo Turski]

Hi,

<div style="position:absolute; left:0; top:20px; width:100%; background-color:red; color:#fff;">
<div style="margin-left:15px; background-color:blue; height:50px;"> </div>
</div>

wozu überhaupt die absolute positionierung und div-verschachtelung?
sollte
<div style="margin:20px 0 0 15px; background-color:blue; height:50px;"> </div>
nicht ausreichen?

freundliche Grüße
Ingo

[Struppi]

Im IE 6.0 erscheint der erwartete 50px hohe Balken mit 15px Abstand von links über die geamte Bildschirmbreite. Der "Herr" Mozilla jedoch, dehnt es etwas über den rechten Rand hinaus aus, so daß eine horizontale Scrollbar entsteht.

Willlst du einen Balken machen?
Wie wär es mit border-top: 50px #XXXXXX solid; in deinem Element (evtl. im Body?)

Struppi.