IE6 zerschießt meinen Baukasten

B

blindtexter

Grünschnabel
Hallo zusammen.

Ich benötige die Hilfe von CSS-Profis! Ich habe relativ optimistisch den CSS-Code meiner statischen HP in das Stylesheet des dazugehörigen Blogs kopiert. So ist ein äusserst wildes CCS entstanden, dass von allen anderen klassischen Browsern allerdings akzeptiert wird: Opera, FF, Safari... Nur der IE in der 6er-Version weigert sich (Version 7 habe ich nie installiert).

Die Blogseite ist mittlerweile sowohl XHTML- als auch CSS-valide.
Vergleicht doch einfach mal die Darstellung im IE:

Statische Seite (ok)
Blogseite (zerschossen)

Bin für jede Hilfe dankbar!
 
Hi,

auf der funktionstüchtigen Seite schaltest du den IE6 mit dem XML-Prolog vor der Doctype-Deklaration in den "Quirksmode" - siehe Der »DOCTYPE-Switch« und seine Auswirkungen - auf der neuen Seite hingegen wird ihm das Dokument nun im standardkonformen Modus übergeben.

Die Blog-Seite wird vom IE7 im Vergleich zum IE6 aber noch katastrophaler dargestellt, denn der eh schon zu schmale iFrame sitzt im Vollbildmodus zum Teil im nicht-sichtbaren Bereich des linken Browserfensters und wird noch weiter nach links rausgeschoben, wenn das Fenster in der Horizontalen runterskaliert wird.

mfg Maik
 
Okee.

Aber ich habe doch extra den vorherigen "Almost Standard" (wie auf der statischen Seite) in den strengeren "Full Standards Mode" gewandelt - damit IE6 nicht in den Quirkmodus wechselt. Oder habe ich das falsch verstanden?

Oder anders: Was muss ich tun? ;-)
 
Da hast du wohl irgendwas falsch verstanden, denn hiermit:

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
schaltet der IE6 in den Quirksmodus, der IE7 hingegen läuft weiterhin im standardkonformen Modus, solange nicht vor dem XML-Prolog oder zwischen ihm und der Dokumenttyp-Angabe ein HTML-Kommentar gesetzt wird.

Was konkret zu tun ist, kann ich dir auf die Schnelle nicht sagen, da die beiden Sytylesheets doch recht umfangreich sind, als dass man da als Außenstehender sofort einen Überblick gewinnt.

Du müsstest dich also schon eine ganze Weile gedulden, bis ich die ausreichende Zeit finde, um mich in aller Ruhe mit den Stylesheet szu befassen, sie zu lesen und in ihre Einzelteile zu zerlegen, um der Ursache auf den Grund zu gehen.

mfg Maik
 
Den ersten Übeltäter hab ich schon direkt ausfindig gemacht, der in den IEs für das Verschieben des DIVs #container zum linken Fensterrand hin und je nach Fensterbreite darüber hinaus verantwortlich ist ;-)

Code: 
body div#container{float:right;margin:0 0 0 -250em;width:100%;}


mfg Maik
 
Du hast Recht. Das Problem dabei ist aber folgendes: Wenn ich den margin-Wert auf "auto" setze, verrückt das die Sidebar nach unten. Die hat dann nämlich nicht mehr genug Platz auf der linken Seite...
 
Sind dir die Conditional Comments bekannt?

Mit ihnen kann gezielt der IE angesteuert und, wenn nötig, zwischen den bestehenden Versionen unterschieden werden, sie werden nämlich ausschliesslich von ihm interpretiert/ausgeführt, alle übrigen Browser handeln sie als Kommentar.

Auf diese Weise lässt sich im Seitenheader nach dem Aufruf des herkömmlichen Styleseet eine CSS-Browserweiche setzen, um die IEs mit einem Extra-Stylesheet zu bedienen, das die "vakanten" Eigenschaftswerte mit den Neuen überschreibt.

Code: 
<!--[if lte IE 7]>
<style type="text/css">
body div#container{margin:0 0 0 0;border:1px solid red;}
</style>
<![endif]-->
Den roten Rahmen hab ich hier als kleine Zugabe definiert, damit dir bewußt wird, bis wohin sich die Box eigentlich im Viewport erstreckt.

Diese Rahmendefinition solltest du ruhig mal im anderen Stylesheet einbinden, um auch in den übrigen Browsern zu erkennen, bis wohin die Boxengrenzen reichen. Die width:100%-Deklaration für diese Box ergibt auch wenig Sinn, wenn sie an ihrer linken Flanke von der Sidebar umflossen werden soll.

Ich persönlich würde eh die Reihenfolge der beiden Blöcke #container und .sidebar im Markup tauschen, dann sind all diese negativen Außenabstände hinfällig, um das Layout im Viewport "zurechtzurücken".

*just my 2 cents*

mfg Maik
 
Hallo Maik,

danke für dein laufendes Engagement für meine Seite!

Ich hatte heute leider nicht wirklich Zeit, tief in den Code einzusteigen. Habe deine Tipps einmal ausprobiert, sie führten aber leider zu dem gleichen Resultat wie zuvor: Die Navileiste verschwindet nach unten. Das aktuelle Problem ist also folgendes:

Der IE(6) stellt den div#container-Bereich (bzw. genauer den div #content .hfeed, so bezeichnet der Webdeveloper-Kit im FF zumindest den fraglichen Bereich) gar nicht dar. Behelfsmäßig habe ich einen Hinweis für IE-User in den Footer aufgenommen mit Links zu anderen Webbrowsern. Mit Blick auf die verschiedenen Browser-Statistiken (z.B. hier, die den Microsoftbrowsern Marktanteile von über 66% Prozent bescheinigt) kann das natürlich nur eine Zwischenlösung bleiben.

Wenn du also bei Zeiten mal eine ruhige Minute (oder einige mehr...) findest, wäre ich dir sehr dankbar. Vielleicht hilft dir ja auch die Eingrenzung auf den .hfeed in irgendeiner Weise?

Einen schönen Sonntag wünsch' ich!
 
Wenn ich im HTML-Code die Reihenfolge der beiden Spaltenblöcke #container und #primary/.sidebar tausche, und folgende CSS-Regeln für das Dokument angebe, wird ihre Ausrichtung / Position im Anzeigebereich browserübergreifend, also incl. IE 6 + 7, einheitlich dargestellt:

Code: 
body div#container{margin:0 0 0 16em;}
body div#content{margin:0;}
Code: 
body div#wrapper{width:100%;}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück