IE8 versetzt website um ca 20 pixel

Wongraven · 07.04.2010

Hey Leute,

ich hab bei ner Kundenseite mal wieder Spaß mit dem IE8...

Problembeschreibung:

Ich habe eine .css Datei für den Einsatz im IE8 und eine für den Einsatz im Firefox/Opera.

Nun wird bei Seitenaufruf erst die Datei für Firefox/Opera geladen, danach (nächste Zeile) dann via eines Conditional Comment das File für den IE8.

Firefox/Opera funktionieren auch toll. Zeigt mir alles genau an, wies soll.

IE macht, meines Erachtens nach, folgendes:

Er lädt sich erst das css-File für den Firefox, zeigt mir das verzogene Layout an. Lädt dann das File für den IE und versetzt mir dann in der Anzeige das ganze um 10-20 Pixel nach links.

Ok...

Bisher versucht habe ich eine Browserweiche mit JS. Ergebnis ist das gleiche, auch nach Löschen des Cache. Auch hab ich versucht mit weiteren Conditional Comments das ganze abzufangen. Ohne Erfolg.

Gibts ne Möglichkeit, den IE dazu zu zwingen das CSS für den Firefox zu "übersehen"? Oder ne sinnige Alternative zu den conditional comments im CSS File, die mir die Datei nur absolut unwartbar machen?

Ich bin euch für jede Hilfe oder jeden Hinweis dankbar...

MFG,
Wongraven

Solla · 07.04.2010

AW: IE8 versetzt website um ca 20 pixel

Also so ganz klar ist mir nicht, warum die Browserweiche mit CC bei dir nicht funzt!

Wie machst Du das denn? Mit einem externen CSS für IE8 müsste das doch klappen!

Einfach eine externe CSS-datei Namens ie8.css erstellen und folgendes im <head>-Bereich der Seiten notieren:



Nachdem Du ja die ungefähren Werte kennst um die IE8 Dein Layout verschiebt musst du in ie8.css das natürlich an den entsprechenden Stellen auch realisieren-

Ich hoffe das hilft Dir weiter, wenn nicht poste doch einfach mal den Quelltext, oder gib den genauen Link zu der Seite an, falls die schon online steht!

B.G. Solla

Wongraven · 08.04.2010

AW: IE8 versetzt website um ca 20 pixel

Hallo Solla,

bin gestern nicht mehr dazu gekommen zu schreiben, aber dafür jetzt.

Also den Link kann ich leider nicht posten, wegen Verschwiegenheitspflicht und bla., aber den enbtsprechenden Teil ausm Quelltext post ich mal.

<link rel="stylesheet" type="text/css" href="/xxx/xxx/design/style/design_others.css">



In der ersten Zeile lad ich mir ja das reguläre stylesheet rein, damit auch die nicht-IE Browser was anzeigen.

Dann hab ich meinen CC in dem ich ganz allgemein nach dem IE frag und den das ausführen lass.

Die Browserweiche an sich funktioniert auch. Das Problem ist nur, das der IE ERST das allgemeine stylesheet lädt, anzeigt und DANN erst seines holt. Dadurch kommts zum Versatz von knapp 20px.

Kann ich irgendwie verhindern, das der IE erst das reguläre css file lädt?

Dreh ich das ganze um wird freilich das IE-Design mit dem für die anderen überschrieben. Und das ist ja im IE auch nicht Sinn und Zweck der Sache.

Kann das am Doctype liegen? Unser CMS nimmt standartmäßig HTML 4.01 Transitional? Funktionieren im IE die CCs besser wenn ich XHTML 1.0 verwend?

Sorry für die ganzen fragen, aber ich such mir seit 2 Tagen die Finger wund danach.

Und vielen Dank für die Beantwortung meiner Fragen!

MFG
Wongraven

Solla · 08.04.2010

AW: IE8 versetzt website um ca 20 pixel

Also so wie ich das sehe hast Du, wenn die Angaben korrekt und vollständig sind nur 1 extra css für alle IE's...Wenn das der fall ist musst Du eben einfach wirklich eine CSS speziell für IE8 schreiben.

Dass das an der Reihenfolge liegt kann ich mir irgendwie kaum vorstellen. Schließlich heißt der Befehl ja < if IE8> das ist ganz wichtig, denn sonst sprichst Du alle IEs damit an, also wird damit speziell der IE8 aufgerufen und alle anderen Browser reagieren nicht drauf...

Ich packe Dir hier mal was von der Seite CSS - Conditional comments

Code:

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>

Note the special syntax:

gt: greater than
lte: less than or equal

Also die Reihenfolge ist definitiv "wurscht". Nur der Name für den Browser muss stimmen.

Sag mal warum eigentlich die vielen verschachtelten Verzeichnisse in der Website? Vielleicht kannst Du das Problem nach Einhaltung der o.g Regeln auch minimieren indem DU die CSS Datei in einen simplen Ordner im Stammverzeichnis ablegst, oder ist das durch das CMS so vorgegeben.

Ich hoffe das Dir das hilft, fühle mit Dir, da ich weiß, wie verzweifelt man sein kann, wenn man vor einem solchen Problem steht und nahezu alles schon versucht hat. :'( Kopf hoch Du schaffst das!

Ich drücke Dir die Damen, dass es diesmal klappt, wenn nicht kannst Du gerne nochmal was posten. Wäre natürlich auch chön, wenn Du im Erfolgsfall das ganze auch postest!

B.G. und schönen Tag
Solla

Wongraven · 08.04.2010

AW: IE8 versetzt website um ca 20 pixel

Ich dank Dir für Deine schnelle Hilfe, aber leider funktionierts auch damit noch nicht. Vielleicht nen Bug oder sowas?

Der Kunde hats auch so noch nicht weiter als Fehler registriert, deswegen lass ichs jetzt mal sein. Mich persönlich ärgerts halt, weil das Springen einfach Übel aussieht. *seufz*

Wenn jemand noch zufällig ne Lösung hat, dann einfach posten. Ich werds dann ausprobieren.

Vielen Dank nochmal.

sokie · 08.04.2010

AW: IE8 versetzt website um ca 20 pixel

Hallo Wongraven,
sicher gibt es eine Lösung für das Problem. In der Regel benutzt man für spezielle Formatierungen(Probleme) für spezielle IE Versionen kein komplett anderes stylesheet, sondern ein ergänzende, dass nur die in frage stehenden Elemente angepasst formatiert.
Die Reihenfolge der eingebundenen stylesheet spielt dabei eine wichtige Rolle, da später geladene stylesheets vorangegangene "überschreiben".
Ein bisschen merkwürdig ist allerdings, dass das Problem nur bei der Version8 auftritt - stellen die anderen IEs die Seite denn korrekt dar?

leider ist es unmöglich eine konkretere Aussage zu machen, wenn man keinen Code hat.
vielleicht lädst Du das ganze mal auf deinen Webspace (die Inhalte, die deine Verschiegenheitspflicht berühren kannst du ja durch allgemeine ersetzen.)