IE lässt mich verzweifeln - CSS nervt

[Dorte]

Seufz. Ich habe meine Seite jetzt schön anständig gecodet und habe laut W3 keine Fehler im Code oder im CSS. Das hindert den IE 7 aber nicht, mein Layout zu zerschießen. Nehmen wir mal als Beispiel, damit wir all dasselbe anschauen, diese Seite: Aymalen
So sieht die Seite bei mir in Opera aus und genauso soll sie auch aussehen:
Klick

So sieht sie allerdings im IE aus und das Menü ist einfach absolut ungünstig platziert:
Klick

In meiner CSS-Datei habe ich die beiden Divs so eingetragen:

Code Auswählen Erweitern


body
         {
         background-image:url(hintergrund.JPG);
         background-attachment:fixed;
         font-family:Georgia,Arial;
         }
div.Navi
         {
         text-align:left;
         float:left;
         margin: 0;
         margin-left:0;
         padding: 0;
         background-color:#B4B4C8;
         font-weight:bold;
         font-style:normal;
         position: fixed;
         border-color:#B4B4C8;
         border-width:3px;
         border-style:ridge;
}
div.Seite
        {
         text-align: left;
         margin: 0 auto;
         padding: 5px;
         background-color:#B4B4C8;
         color:#000040;
         margin-left:250px;
         margin-right:50px;
         border-color:#B4B4C8;
         border-width:3px;
         border-style:ridge;
}


Hat irgendwer eine Idee, wie ich dem IE erkläre, was er zu tun hat? Oder habe ich (mal wieder) einen groben Schnitzer gemacht und bin zu betriebsblind, ihn zu entdecken?

[Maja]

Was für ein Zufall! Auf der Seite war ich eben noch!

Das Problem ist "position: fixed" IE kommt damit nicht klar. Normalerweise positioniert er es dann automatisch absolute, und es ist kein Schaden geschehen - aber die Kombination mit dem "Float: left;" läßt ihn dann ganz aus dem Ruder laufen.

Eigentlich brauchst du das "Float: left" hier nicht [korrekt: Es *darf* nicht mit "position: fixed" stehen] - das ist für die Plazierung innerhalb eines anderen Divs gut, aber hier kannst du es folgendermaßen lösen:

Code Auswählen Erweitern


div.Navi
         {
         position: fixed;
         left: 5px;
         top: 5px;
         ...
         }


Das spart dir das Float und setzt den Div ungefähr dahin, wo er hinsoll (die 5px sind geraten). Der IE scrollt ihn dann nach oben, die anderen Browser behalten ihn brav im Bild.

Ansonsten hast du noch eine kleinen Fehler im CSS:

Code Auswählen Erweitern


         margin: 0;
         margin-left:0;

Wenn du "margin" ohne Richtungsangaben verwendest, bezieht es sich schon auf alle vier Seiten. Dann mußt du nicht nochmal mit "Margin-left" den gleichen Wert angeben.

Ich hoffe, das hilft dir weiter!
LG, Maja

[Dorte]

Viiiiiielen Dank, Maja! Dass sich float und position kloppen, habe ich bei SelfHTML wohl irgendwie überlesen. Und der doppelte Margin kam aus meinen Versuchen, dem IE das irgendwie ins Gehirn zu hämmern, was er tun soll! Jetzt scheint es zu funktionieren, ich ändere das gleich auch mal online!
Danke danke danke!

[Breanna]

Das könnte auch mein Problem beim position:fixed sein (das ich mal ausprobiert und wieder aufgegeben habe, weil es nicht funktioniert hat). Werd deinen Tipp auch mal probieren, Maja, danke.

[Dorte]

Bei Coppelia sieht das Ding immer noch verkehrt aus, habe ich vorgestern festgestellt - kann natürlich sein, dass es an ihrer Bildschirmauflösung liegt. Dort klebt das Menü jetzt am oberen Rand, und darunter folgt dann das Textfenster.
Gibt es eine Chance, das zu lösen, oder haben Benutzer des IE einfach selbst Schuld?
Bei mir und einer Freundin sieht es im IE jeweils genauso aus, wie es aussehen soll...
http://www.die3welten.de/hauptseite.php

[Moni]

Bei Coppelia sieht das Ding immer noch verkehrt aus, habe ich vorgestern festgestellt - kann natürlich sein, dass es an ihrer Bildschirmauflösung liegt. Dort klebt das Menü jetzt am oberen Rand, und darunter folgt dann das Textfenster.
Gibt es eine Chance, das zu lösen, oder haben Benutzer des IE einfach selbst Schuld?
Bei mir und einer Freundin sieht es im IE jeweils genauso aus, wie es aussehen soll...
http://www.die3welten.de/hauptseite.php

Also, im IE 7 sieht es korrekt aus, benutzt Coppi eventuell den IE6? Der hat nämlich mit CSS manchmal Probleme. Ich kann mir dein Stylesheet heute abend mal in Ruhe ansehen und das mit verschiedenen IE Versionen testen wenn du magst.

Moni

[Dorte]

Das wäre natürlich super! Und ansonsten haben Leute mit IE halt Pech, die sollen sich halt einen standardkonformen Browser besorgen Kann ja nicht an alles denken, bin arme dumme Tante...

[Moni]

Das wäre natürlich super! Und ansonsten haben Leute mit IE halt Pech, die sollen sich halt einen standardkonformen Browser besorgen Kann ja nicht an alles denken, bin arme dumme Tante...

Ich hab es gestern leider nicht mehr geschafft, aber an diesem Wochenende beschäftige ich mich eh etwas stärker mit Webdesign, ich schaue mir den Code auf jedenfall mal an.
Für die Problematik mit den nicht standardkonformen Browsern gibt es Lösungen aus der Praxis: Browserweichen und Hacks. Gerade für das Problem mit der Positionierung über Div's greift in Bezug auf den IE6 der Box-Model-Hack. Vielleicht finde ich in meinen schlauen CSS Büchern eine Lösung für dein Problem.

Lg
Moni

[Dorte]

Hach, das Internet ist toll! Man trifft Leute, die Ahnung haben und auch noch nett sind Danke im Voraus für deine Mühen, Moni.

[Moni]

Das sieht für mich tatsächlich wie eines der typischen IE6 Probleme mit CSS aus. Ich schicke dir mal ne Mail mit den Mods, die eventuell Abhilfe schaffen können. Allerdings müßtest du es ausprobieren. Ich habe mir jetzt nur den Quellcode deiner Hauptseite und des Css runtergeladen, kann also nicht viel austesten. Aber wenn du erst mal weißt, wie du etwas ändern mußt, könnte es auch gehen.

Ich hab hier mal meine beiden Screenshots angefügt, der erste im IE7, der zweite im IE6

[gelöscht durch Administrator]

[Moni]

Und so sieht es im IE6 aus, also mit zerschossenem CSS. Ich nehme an, so sah es bei Coppi aus?

[gelöscht durch Administrator]

[Coppelia]

Ja, genau, so sah es bei mir aus ...
Das wird das Problem sein.

[Moni]

Ja, genau, so sah es bei mir aus ...
Das wird das Problem sein.

Ich kann dir nur empfehlen auf den IE7 umzusteigen. Zum einen ist der neue IE tatsächlich näher am standardkonformen Brwoser als jeder andere IE vorher, so daß solche Bugs nicht mehr auftreten und zum anderen ist er auch in anderer Hinsicht wesentlich komfortabler (z.B. hat er jetzt auch Tabs zum Browesen) und auch sicherer als der IE6.

[Dorte]

Vielen Dank für deine Mühe, Moni! Dann weiß ich immerhin jetzt, wo das Problem liegt. Ich glaube, die Details knobeln wir besser per Mail aus.

[Coppelia]

Ja, mal sehen ... ich hab irgendwie Probleme mit dem Browserwechseln. Bin so ein Gewohnheitstier ... Die Favoriten blieben doch erhalten?