Tabellenlayout durch CSS ersetzen

[amln]

Ich wollte in dieser Seite:
http://www.molon.de/test/test14/

die Tabellen mit divs ersetzen. Soweit bin ich gekommen:
http://www.molon.de/test/test16/

Im unteren Bereich (menu3) ragen die Menüpunkte (galleries, categories, travelogues, search, licencing usw.aber raus. Wie kann man das korregieren, so dass alles wie im ersten Beispiel aussieht?

 

[threadi]

Du müsstest entweder .menu3 eine feste Höhe geben oder nach den Menüpunkten ein clear einfügen. Denn dadurch, dass diese Elemente gefloatet werden, erhält .menu3 keine Höhe und man sieht es quasi nicht.

EDIT: Da hast Du noch einen Schnitzer:
http://validator.w3.org/check?verbose=1&uri=http://www.molon.de/test/test16/

 

[amln]

Danke für den Tipp. Mit clear klappt es jetzt:
Test CSS dropdownmenu

Im IE9, Opera und anderen aktuellen Browsern sieht alles super aus. Allerdings im IE9 wenn ich auf Kompatibilitätsansicht gehe ist alles durcheinander (der menu3-Streifen ist sehr hoch, das Logo rutscht nach unten, die li-Elemente der linken Seite von menu3 sind oben im menu3-Balken, die Links auf der rechten Seite sind unten im menu3-Balken). Woran liegt das?

 

[threadi]

Drück mal im IE die Taste F12. Damit rufst Du die Entwicklertools dort auf, so etwas wie Firebug nur etwas weniger umfangreich ;) Dort kannst Du oben in der Leiste sehen mit welcher Engine du gerade die Seite aufrufst. Also IE7 oder IE8 oder IE9. Wenn Du mit deiner Ansicht also irgendein Problem hast dann schau nach in welcher Engine genau das Problem auftritt und such nach diesem Effekt. Ältere Browserengines wie IE7 und auch IE8 haben so ihre "Macken" ;)

 

[amln]

Ach so...

Also im IE8 und IE9 klappt alles. IE7 scheint aber Probleme mit float:right zu haben.

Bisschen recherchiert, und die Lösung scheint hier zu sein:
css - IE7 float right problems - Stack Overflow

Man muss das float-element (in diesem Fall das Logo) vor dem h1 erscheinen lassen. Zusätzlich waren noch padding-top: 10px damit das Logo mit der Überschrift zentriert ist:

<div class="menu2">
<a href="./" style="float:right;"><img style="border: 0px none; padding-top: 10px;" src="galleries/logorund.gif" alt="" height="24" width="33"></a>
<h1>Photo Galleries</h1>
</div>

 

[threadi]

Also gelöst?

Dann noch eine Bitte: wenn Du Codes hier postest, verwende bitte die Code-Tags dafür. Sieht einfach übersichtlicher aus.