nicht angemeldet
Hallo Avalon,
Im Mozilla verhält sich absolut korrekt.
Mhh ... Meinst du damit, dass die vertikale Ausrichtung der Oberkante vom #Newsbalken an der des #Inhalts im Mozilla korrekt ist, oder dass das ganze bei deiner Mozilla-Version korrekt an der Oberkante der umschließenden Box ausgerichtet wird?
Ersteres (M$IE verhält sich übrigens genau so - obwohl es kein Gütesiegel ist)
Wenn ersteres der Fall ist, bitte ich dich, das an den entsprechenden Stellen der CSS-2-Spezifikation http://www.w3.org/TR/REC-CSS2/visuren.html#floats
nachzuweisen.
Ich zitiere aus dieser Quelle:
"5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document."
oder in deutscher Übersetzung:
"5. Die äußere obere Kante einer Floating-Box darf nicht höher als die äußere obere Kante einer Block- oder Floating-Box liegen, die von einem früheren Element im Quelldokument erzeugt wurde."
Und wenn du dich nicht auf komplizierte Erklärungen einlassen willst, schöag' doch einfach eine Alternative vor, die auch im Mozilla so, wie von mir beabsichtigt, angezeigt wird.
Setze einfach ein klammenrdes div um die divs #logo, #intro und #inhalt und weise ihm float:left; zu. Gegebenfalls hilft auch dem newsdiv die Eigenschat float:left; zu nehmen, dann beginnt es auch ganz oben, dann gibt es aber Probleme mit dem M$IE
Um's nicht zu kompliziert zu machen:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
html, body {width:100%; height:100%;}
.float {float:left ;border:1px solid red;}
.eins {width:100%; height:10em; background-color:lightgreen;}
.zwei {width:100%; height:10em; background-color:yellow;}
.drei {width:30%; height:30em; background-color:lightblue;}
.vier {width:30%; height:90%; margin:1em; border:thin solid blue;}
</style>
<script type="text/javascript">
</script>
</head>
<body> <div class="float" style="width:65%";>
<div class="float eins">Hier steht Text</div>
<div class="float zwei">Hier steht Text</div></div>
<div class="float drei">Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
</div>
</body>
</html>
Da meine Interpretation der W3C-Spezifikationen und die der Mozilla people einen größeren Gestltungsspielraum zulassen als die von Opera (und wohl auch Deine) ist meine Interpretation nicht zwingend richtig, aber besser. Ich bin daher fest davon überzeugt, daß man beim W3C genauso denkt.
Aber jetzt mal ehrlich, die Lösung war doch naheliegend, da hättest Du doch auch drauf kommen können.
Gruß
Avalon