das übliche: Layout einer Website mit Float-Elementen vs IE7

[DeWitt]

Hallo SELFHTML-Gemeinde,

Ich habe leider bis dato die neuen Bugs des IE 7 nur wenig verfolgt, aber jetzt bin ich selbst davon betroffen:
Auf meiner Homepage verwende ich ein tabellen-freies Layout, in dem der Haupt-Inhalt (#main) um die Navigationsleiste (#navigation) fließen soll. Die beiden betroffenen Elemente werden wie folgt formattiert:

  
#navigation {  
    float:left; width:212px; margin:4px 5px 0 0; padding:0;  
 background:#CCF; text-align:left;  
    border-width:0 3px 3px 0;  
 border-style:solid;  
 border-color:#CC9 #FF9 #FF9 #CC9;  
}  
  
#main {  
    margin:4px 0 1em 0px; padding:0.2em 1em 1.5em 220px; min-height:400px; line-height:1.4em;  
 background: #669 url(images/design/bg_mitte.jpg) 0 0 no-repeat;  
 border-width:3px;  
 border-style:solid;  
 border-color:#CC9 #FF9 #FF9 #CC9;  
}  

(Auszug aus meiner layout.css-Datei )

Erfolgreich getestet hatte ich das ganze in Opera, Firefox und (bilde ich mir zumindest ein) IE 6. Nachdem ich die Seite nun seit längerem mal wieder bearbeitet habe, fiel mir eben auf, dass der IE 7 mal wieder alles falsch macht: Der #main-Container wird komplett neben der Navigation dargestellt, so dass der Text erst 220px neben der Navigation beginnt. Oder mache ich was falsch?

Ich befürchte zwar, hier ein ganz banales Problem anzusprechen, aber hoffe trotzdem auf den hilfreichen Fingerzeig ;).

Ciao,
David //aka DeWitt

[wahsaga]

hi,

Erfolgreich getestet hatte ich das ganze in Opera, Firefox und (bilde ich mir zumindest ein) IE 6. Nachdem ich die Seite nun seit längerem mal wieder bearbeitet habe, fiel mir eben auf, dass der IE 7 mal wieder alles falsch macht:

Du hast noch einige "CSS-Hacks" in deinem CSS.

Überprüfe, ob diese
a) vom IE 7 nicht mehr interpretiert werden, die Korrektur aber für ihn weiterhin nötig wäre, oder
b) vom IE 7 immer noch interpretiert werden, der eigentliche Fehler, der damit korrigiert werden sollte, aber im IE 7 nicht mehr vorhanden ist.

Einbindung des jeweils nötigen dann vielleicht eher über Conditional Comments.

gruß,
wahsaga

[DeWitt]

Überprüfe, ob diese
a) vom IE 7 nicht mehr interpretiert werden, die Korrektur aber für ihn weiterhin nötig wäre, oder
b) vom IE 7 immer noch interpretiert werden, der eigentliche Fehler, der damit korrigiert werden sollte, aber im IE 7 nicht mehr vorhanden ist.

Einbindung des jeweils nötigen dann vielleicht eher über Conditional Comments.

Oh stimmt, an dieser Stelle sind conditional comments sicher besser. Das hab ich jetzt geändert.

Allerdings lag es nicht an den Hacks (die haben nur kleinere Darstellungsunterschiede beseitigt). Das Problem war/ist vielmehr, dass der IE float nicht mehr wie die anderen Browser umsetzt, wenn der umfließende Text eine Größenangabe hat (Beispiel). Bei mir lag es an der min-height Angabe des #main-Elements. Aufgefallen ist das ganze eben erst jetzt, da IE < 7 keine min-height Angaben kennt und somit auch nicht umsetzt ;).
Vorerst habe ich das min-height Attribut jetzt ganz rausgenommen, allerdings ist die Darstellung von kürzeren Seiten jetzt nicht mehr besonders schön.

Gibt es eine Möglichkeit, Größenangaben für den IE zu widerrufen? CSS-Hacks zum Ausschließen des IE scheiden leider aus, da diese vom IE 7 nicht mehr ignoriert werden. (siehe http://de.selfhtml.org/css/layouts/anzeige/css_weichen.htm)

[Gunnar Bittersmann]

Hello out there!

Oh stimmt, an dieser Stelle sind conditional comments sicher besser. Das hab ich jetzt geändert.
[…]
Gibt es eine Möglichkeit, Größenangaben für den IE zu widerrufen?

?? Du sagtest es doch gerade selbst: conditional comments.

CSS-Hacks zum Ausschließen des IE scheiden leider aus

Mit conditional comments kannst du nicht nur „den“ IE bedienen, sondern verschiedene Versionen.

See ya up the road,
Gunnar

[DeWitt]

Oh stimmt, an dieser Stelle sind conditional comments sicher besser. Das hab ich jetzt geändert.
[…]
Gibt es eine Möglichkeit, Größenangaben für den IE zu widerrufen?

?? Du sagtest es doch gerade selbst: conditional comments.

Hmm, ich hab mich wohl nicht deutlich ausgedrückt: Wenn ich in der allgemein gültigen CSS-Datei eine Größenangabe (min-height:400px;) mache, müsste ich diese dann in einem Conditional Comment wieder entfernen. Einfach auf Wert '0' o.Ä. setzen, reicht hier nicht - ich müsste ja quasi dem IE weis machen, dass für das main-Element gar keine Größenangabe _existiert_.
Bis IE 7 hätte ich dieses Problem lösen können, indem ich die Größenangabe in einen Attribut-Selektor einbaue (html>body #main {min-height:400px;}), aber für IE 7 gilt dieser Hack nicht mehr.

[Gunnar Bittersmann]

Hello out there!

Hmm, ich hab mich wohl nicht deutlich ausgedrückt: Wenn ich in der allgemein gültigen CSS-Datei eine Größenangabe (min-height:400px;) mache,

Mach das doch nicht. Gib doch 'min-height' in einem Stylesheet an, das für alle Browser[tm], nicht aber für IEs gilt.

See ya up the road,
Gunnar

[DeWitt]

Mach das doch nicht. Gib doch 'min-height' in einem Stylesheet an, das für alle Browser[tm], nicht aber für IEs gilt.

Ah, das geht? Das wusste ich gar nicht. Ich dachte, es gäbe nur die Möglichkeit, für die IE-Versionen spezielle Stylesheets anzulegen.

Wie bewerkstellige ich das?

[Gunnar Bittersmann]

Hello out there!

Ich dachte, es gäbe nur die Möglichkeit, für die IE-Versionen spezielle Stylesheets anzulegen.

Else-Zweig bei Conditional Comments. Ganzen Thread (Berichtigungen) lesen!

See ya up the road,
Gunnar

[DeWitt]

Else-Zweig bei Conditional Comments. Ganzen Thread (Berichtigungen) lesen!

Wunderbar :). Wieder ein Stückchen schlauer ;).

[Bud]

Hi.

#main {
margin:4px 0 1em 0px; padding:0.2em 1em 1.5em 220px; min-height:400px; line-height:1.4em;
background: #669 url(images/design/bg_mitte.jpg) 0 0 no-repeat;
border-width:3px;
border-style:solid;
border-color:#CC9 #FF9 #FF9 #CC9;
}

> Ich befürchte zwar, hier ein ganz banales Problem anzusprechen, aber hoffe trotzdem auf den hilfreichen Fingerzeig ;).  
  
Mit `margin: 220px`{:.language-css} statt `padding: 220px`{:.language-css} sieht es schon besser aus.  
  
Es gibt aber auch noch einen Scrollbalken im IE7. Der kommt vom float bzw. der fehlenden Breite bei:  
  
~~~css
div.news var {  
 float: right;  
 font-size: 0.85em;  
 font-style: oblique }

Bitte kein oblique (schräg) benutzen, das tut typografisch geschulten Augen weh. Das Bessere nennt sich italic (kursiv).

vg Bud

[DeWitt]

Bitte kein oblique (schräg) benutzen, das tut typografisch geschulten Augen weh. Das Bessere nennt sich italic (kursiv).

Gut zu wissen ;). Hab ich geändert.