Hallo Leute,
ich hab ein Problem mit folgendem Code:
<body style="margin: 0px; background-color: #234251; text-align: center;">
<div style="width: 780px; padding: 20px 50px 0px 50px; margin: 20 auto; background: #000 url('page.gif') no-repeat;">
<div style="padding: 40px 20px 20px 40px; width: 720px; height: 80px; background: #fff url('header.gif') no-repeat;"><h1>Title</h1></div>
<div style="padding: 8px 20px 8px 20px; width: 740px; height: 24px; background: #fff url('menu.gif') no-repeat;">Menu</div>
<div style="width: 770px; padding: 5px; background-color: #fff;">
<div style="width: 550px; padding: 10px; background-color: #fff; float: left;">
<h1>Content</h1>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div style="width: 160px; padding: 20px; background: #f0f0f0 url('sidebar.jpg') no-repeat; float: left;">
<h2>Sidebar</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<div style="width: 740px; height: 18px; padding: 8px 20px 20px; 20px; background: #fff url('footer.gif') no-repeat; font-size: x-small;">Footer</div>
</div>
</body>
Und zwar scheinen im Firefox verschachtelte Div-Container das übergeordnete Div nicht "aufzuspannen". Um es verständlicher zu machen, hab ich mal 2 Screenshots gemacht:
http://www.thomas-ney.com/soll.jpg zeigt den IE6, der meinen Code so interpretiert, wie ich es gern hätte.
http://www.thomas-ney.com/ist.jpg zeigt den Firefox mit genanntem Problem.
Ist sicher nur ne kleine CSS-Ergänzung, nur komm ich nicht drauf und verzwifel grad etwas. Darum danke ich euch bereits im Vorraus für eure Hilfe.
P.S.: Das ganze ist natürlich nur Entwurfs-Code, also nicht über die CSS-Befehle im HTML-Code wundern.