Problem mit float

[Stefan M.]

Hallo. Ich habe als Konzept eine einfache Seite mit ein paar <div>'s und einem CSS erstellt, welche unter http://image.lodsoft.de/temp/test.htm temporär verfügbar ist.

(Es folgt Wortgulasch, um die Sache abzukürzen.) Das Problem spielt sich im div#menu ab, welcher ein links gefloatetes img#sitelogo sowie weitere nichtgefloatete <div>'s enthält. Das umschließende div#menu hat eine 1 Pixel breite border-bottom, welche unter allen Kindelementen, insbesondere dem img, stehen sollte. In IE 7 funktioniert das auch tadellos, in den standardkonformen Browsern (hier Op 9 und FF 2) allerdings nicht.

Ich hatte schon versucht, als letztes Kindelement des div#menu ein div#menuend mit { clear:both; } einzufügen. Auch hatte ich getestet, ob es einen Unterschied macht, das img#sitelogo in ein div einzukapseln und dieses anstatt dessen zu floaten. Das hat alles nicht funktioniert.

Da ich vermute, dass IE mal wieder das Prinzip "minus mal minus ergibt plus" anwendet, bedanke ich mich im Voraus für jeden Tipp, wie ich das Verhalten des IE auch in den standardkonformen Browsern erreiche.

[Axel Richter]

Hallo,

Hallo. Ich habe als Konzept eine einfache Seite mit ein paar <div>'s und einem CSS erstellt, welche unter http://image.lodsoft.de/temp/test.htm temporär verfügbar ist.

(Es folgt Wortgulasch, um die Sache abzukürzen.) Das Problem spielt sich im div#menu ab, welcher ein links gefloatetes img#sitelogo sowie weitere nichtgefloatete <div>'s enthält. Das umschließende div#menu hat eine 1 Pixel breite border-bottom, welche unter allen Kindelementen, insbesondere dem img, stehen sollte. In IE 7 funktioniert das auch tadellos, in den standardkonformen Browsern (hier Op 9 und FF 2) allerdings nicht.

Ich hatte schon versucht, als letztes Kindelement des div#menu ein div#menuend mit { clear:both; } einzufügen.

Das muss aber den gewünschten Effekt haben.

wie ich das Verhalten des IE auch in den standardkonformen Browsern erreiche.

Mit der Wunderwaffe overflow, sprich mit

  
...  
                        div#menu {  
                                border-bottom: 1px solid #AAA;  
                                padding: 0.5em;  
                                background-color: white;  
                                width: 100%;  
                                z-index: 1;  
                                overflow: auto;  
                        }  
...  

Wozu hast Du eigentlich das width:100% hier? Das muss raus! In den standardkonformen Browsern ergibt das (100% + 2 x padding von 0.5em) mehr als die Viewportbreite. Für den IE (siehe [link:http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#internet-explorer und dort hasLayout) reicht ein zoom: 1; oder ein height: 1px _ohne_ overflow:auto; in einem Conditional Comment.

Ein overflow:hidden würde auch gehen. Das div#menu darf natürlich keine fix vorgegebenen Maße bekommen, damit die entspechenden anderen Konsequenzen von overflow nicht wirksam werden müssen.

viele Grüße

Axel