IE7 stellt Layout falsch dar

[meli]

Hi,

ich weiß, dass ist ein immer wieder beliebtes Thema. Aber ich hab jetzt echt schon alles durchsucht und immer wieder neues ausprobiert. Aber ich kommme einfach nicht weiter.

Ich hab für ein Website ein DIV (mainWrapperInner) mit min-height angelegt. Da IE damit Probleme hat, hab ich eine extra css-Datei nur für den IE anglegt, in welchem ich dem DIV-Element das Ganze mit height festlege.

Diese ie7.css hab ich dann auf den Seiten als Conditional Stylesheet eingefügt. Trotzdem stellt der IE die Seite falsch dar. D.h. der Footer und das DIV-Element bleiben auf der Höhe und der Content läuft darüber. Im Firefox, Safari etc. funktioniert es.

Anbei der Link zur Testseite
Testlink

Könnt ihr mir da weiterhelfen, was ich da noch im CSS bzw. HTML ändern muss? Ich weiß wirklich nicht, was ich da noch machen soll!

Danke!

VG Meli

[dave]

Hi,

mein IE7 unterstützt min/max-height/width.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, meli!

..., hab ich eine extra css-Datei nur für den IE anglegt,

• Wenn das bedeutet, dass du zwei komplette CSS-Ressourcen hast, bedeutet das doppelten Wartungsaufwand.
• Wenn das bedeutet, dass du nur die Änderungen in der CSS-IE hast, bedeutet das doppelte HTTP-Anfragen

Verwende CSS-Hacks

• html für IE 6
• • html für IE 7 (und ein paar alte Opera)

Matthias

[Meli]

Om nah hoo pez nyeetz, meli!

..., hab ich eine extra css-Datei nur für den IE anglegt,

* Wenn das bedeutet, dass du zwei komplette CSS-Ressourcen hast, bedeutet das doppelten Wartungsaufwand.
* Wenn das bedeutet, dass du nur die Änderungen in der CSS-IE hast, bedeutet das doppelte HTTP-Anfragen

Verwende CSS-Hacks

* html für IE 6
* + html für IE 7 (und ein paar alte Opera)

Matthias

Argh, ich dreh noch durch. Ich glaub ich bin echt zu blöd für sowas. Ich hab jetzt nach CSS-Hacks gegoogelt. Dann hab ich in der Seite den Code für das extra-CSS rausgenommen und im main-CSS folgendes geschrieben:

#mainWrapperInner {
float:left;
min-height:647px;
*height:647px; //für IE7
_height:647px; //für IE6
margin-left:0px;
width:900px;
}

Wenn ich jetzt auf IE NetRenderer die Seite zum testen eingebe, dann macht er mir ein Bild und ich sehe, dass es immer noch nicht klappt. Ich versteh das langsam echt nicht mehr...

[Jean-Max]

Bounjoun Meli,

#mainWrapperInner {
float:left;
min-height:647px;
*height:647px; //für IE7
_height:647px; //für IE6
margin-left:0px;
width:900px;
}

Die von Matthias erwähnten Hacks sind andere:

Star html für IE6
Star+html für IE7

Das ergibt:

/*Formatierung für moderne Browser*/  
#foo { eigenschaft: wert }  
/*Korrekturen für IE6 und IE7*/  
* html #foo { eigenschaft: ie6wert }  
*+html #foo { eigenschaft: ie7wert }

Dabei setzt du in den IE-Korrekturen nur die Eigenschafte/Werte ein, die für eine ordentliche Darstellung in den IEs notwendig sind - nicht nochmal den ganzen Block wiederholen. In deinem Fall also:

/*moderne Browser*/  
 #mainWrapperInner {  
 	float:left;  
 	min-height:647px;  
 	margin-left:0px;  
 	width:900px;  
 }  
/*alte IEs*/  
* html #mainWrapperInner { height: 647px }  
*+html #mainWrapperInner { height: 647px }  

Adiou.

[Meli]

Bounjoun Meli,
Die von Matthias erwähnten Hacks sind andere:

Star html für IE6
Star+html für IE7

Das ergibt:

/Formatierung für moderne Browser/

#foo { eigenschaft: wert }
/Korrekturen für IE6 und IE7/

• html #foo { eigenschaft: ie6wert }
  *+html #foo { eigenschaft: ie7wert }

>   
> Dabei setzt du in den IE-Korrekturen nur die Eigenschafte/Werte ein, die für eine ordentliche Darstellung in den IEs notwendig sind - nicht nochmal den ganzen Block wiederholen. In deinem Fall also:  
>   
> ~~~css

/*moderne Browser*/  

>  #mainWrapperInner {  
>  	float:left;  
>  	min-height:647px;  
>  	margin-left:0px;  
>  	width:900px;  
>  }  
> /*alte IEs*/  
> * html #mainWrapperInner { height: 647px }  
> *+html #mainWrapperInner { height: 647px }  
> 

Adiou.

Vielen Dank!
So, ich hab das jetzt ausprobiert und trotzdem, wenn ich daheim bei mir auf dem IE7 oder bei IENetRenderer die Seite eingebe, funktioniert es immer noch nicht. Ich hab echt keine Ahnung, was ich jetzt noch machen soll :(

[Matthias Apsel]

Om nah hoo pez nyeetz, Meli!

Zitiere bitte sinnvoll, nicht einfach alles.

Ich hab echt keine Ahnung, was ich jetzt noch machen soll :(

Beseitige die Fehler, zum Beispiel das <noscript> im <head>. Vielleicht liegts einfach nur daran.

Matthias

[Jean-Max]

Bounjoun Meli,

Beherzige die Hinweise von Matthias, sowohl was das Zitieren angeht, als auch den, dass sich besser mit einem validen Dokument arbeiten läßt.

So, ich hab das jetzt ausprobiert und trotzdem, wenn ich daheim bei mir auf dem IE7 oder bei IENetRenderer die Seite eingebe, funktioniert es immer noch nicht.

Das, was du angegeben hast, »funktioniert«, ja sogar: »it works as designed«: Das DIV hat im IE 7 eine Höhe von 647px. Ohne overflow:hidden »läuft der Inhalt, so sein Platz mehr als 647px benötigt, aus dem Container heraus«.

Der Footer positioniert sich anhand der Vorgabe, also unterhalb der 647px, die mainWrapperInner einnimmt. Das ergibt dieses »Übereinander« im IE 7.

Da es aber anscheinend nicht das ist, was du wolltest, überlege, ob es vielleicht besser ist, dem DIV gar keine Höhe zu geben, so dass diese vom Inhalt bestimmt wird.

Oder einen komplett anderen Ansatz verfolgen.

BTW: Dave hat Recht, der IE 7 interpretiert max-width und max-height. Das Probleme verbleibt nur noch für den IE 6, der star+html-Hack brauchst du hier nicht - solltest du bei diesem Ansatz bleiben.

Adiou.