IE6 Problem

[tomjons]

Hallo,

habe gerade mit entsetzen festgestellt, das im IE6 mein Layout "entstellt" ist.

Habe zwei Screenshots von IE7 (ok) und IE6 angehängt. Lt. Dreamweaver gibt es im CSS keinerlei Probleme hinsichtlich IE6.

Trotzdem hier ein Ausschnitt:

#maincontent {

width:995px;

background:#ffffff;

}


#leftmenu {

position:relative;  

width:202px;

right:0px;

float: left;

}


#content {

position:relative;  

width:560px;

float:left;

padding-left:15px;

padding-right:16px;

}


#rightmenu {

position:relative;  

width:202px;

right:0px;

float:left;

}[/HTML]

Vielleicht sieht ja jemand schon auf Anhieb einen Fehler.

Danke

[Baskosehund]

Floate die rechte seite doch auch rechts.

[tomjons]

Danke! Jetzt ist sie zumindest rechts bündig.

Jedoch schliesst die Oberkante vom "rightmenu"

jetzt immer mit der Unterkante vom "maincontent" ab.

Also je nach Inhalt ziemlich weit unten.

[Baskosehund]

Mhhh... nimm doch dem "content" das Float weg. Der Soll ja nur die Mitte Ausfüllen. Damit er die linke und rechte box nicht umfließt wenn er länger ist musst du dann noch den abstand links und rechts festlegen.

[tomjons]

Hallo,

hab deine Antwort erst heute gelesen und den Rat befolgt. Der Code sieht jetzt so aus. Jedoch hängt die "Rechte Leiste" in IE6 immer noch am unteren linken Ende vom "content". Die Abstände sind ja mit padding definiert.

#maincontent {

width:995px;

background:#ffffff;

}


#leftmenu {

position:relative;  

width:202px;

right:0px;

float: left;

}


#content {

position:relative;  

width:560px;

padding-left:15px;

padding-right:16px;

}


#rightmenu {

position:relative;  

width:202px;

right:0px;

float:left;

}[/HTML]

[skyborg]

Hallo, ich würde das so machen:

#maincontent { margin:0 auto; width:995px; background:#fff; border-style:solid; border-color:#fff; border-width:0px 0px 0px 0px; }

#leftmenu { float:left; width:202px; }

#content { float:left; width:560px; background-color:#fff; border-style:solid; border-color:#fff; border-width:0px 0px 0px 0px; }

#rightmenu { float:right; width:202px; }

(border entsprechen anpassen)

<div id="maincontent">

<div id="leftmenu">{$boxes}</div>

<div id="rightmenu">{$boxes</div>

<div id="content">{$main_content}</div>

</div>

<Clear>

Wenn es sich tatsächlich um ein reines IE6-Problem handeln sollte, dann kann man das wie folgt lösen (Beispiel):

#xyz { css:123; }

* html #xyz { css:456; }

Gruß

[tomjons]

Hallo,

erstmal Danke für deinen Beitrag.

Aber dass

#xyz { css:123; }

* html #xyz { css:456; }[/HTML]

versteh ich nicht ganz.

Muss ich hier in mein bestehendes Stylesheet was einfügen?

[John Steed]

versteh ich nicht ganz.

Brauchst Du auch nicht - was skyborg da vorschlägt ist der sogenante "Star HTML Hack" (Gurgel mal danach), der einen Bug des IE 5/6 unter Windows ausnutzt.

Meiner Meinung nach sind CSS-Hacks, die Browserfehler voraussetzen keine gute Lösung. Microsoft selbst rät vom Einsatz solcher Techniken ebenfalls ab und empfiehlt eine zwar hemdsärmelige, aber immerhin standardkonforme Technik, den eigenen Browsern angepasste CSS-Dateien unterzuschieben. Das ganze nennt sich "Conditional Comments", wie's funktioniert findest Du u.a. in SelfHTML

In der Praxis sieht das dann so aus, dass Du zunächst wie gewohnt die komplette CSS-Datei auf "herkömmlichem Weg" einbaust und dann *danach* per Conditional Comment eine (oder mehrere, je nachdem wieviele IE-Versionen Du extra bedienen willst) weitere CSS-Datei einbindest, die *nur* die Formatierungen in angepasster Form enthält, die der IE in der "grossen" Datei wirklich falsch versteht. Das sind in der Regel nur wenige Zeilen. IMHO besser und sauberer als alle "Hacks"...

Cheers,

IaN

PS: @skyborg - warum bei der border nicht einfach border:none; - ist doch viel kürzer

[skyborg]

Es gibt nun mal für jede Lösung mehrere Wege. Ob jemand einen Hack einsetzt oder nicht, ist Ansichtssache. Ebenso die Meinungen von Winzigweich. Die gestellte Anfrage findet ihre Antwort auch ganz bestimmt nicht in einem Hack, sondern in ganz normalen CSS ohne irgendwelche Sondermaßnahmen.

Zur Anmerkung:

PS: @skyborg - warum bei der border nicht einfach border:none; - ist doch viel kürzer

Einfach mal genauer und alles lesen, denn das steht auch noch in meinem Text:

(border entsprechen anpassen)

[John Steed]

Ob jemand einen Hack einsetzt oder nicht, ist Ansichtssache.

Jup. Soll doch jeder machen, was er für richtig hält Nur nochmal der Hinweis, das M$ selbst vom Einsatz - zugegebenermassen - langjährig erprobter Hacks abrät. Eine schöne Erklärung und Ausblicke auf die Zukunft findet der Interessierte hier: http://msdn.microsoft.com/en-us/library/bb250496.aspx

Die CC-Variante hat den unbestrittenen Vorteil, dass man sehr fein auf unterschiedliche IE-Varianten eingehen kann (den 5er IE gibt's ja auch immer noch...) und das wirklich *nur* der IE diese Comments interpretiert. Somit "lässt man alle anderen Browser damit in Ruhe" - vielleicht gibt's ja noch andere Browser, die anderes mit den Hacks anstellen... Und besser als alle JavaScript-Browserweichen von vor 10 Jahren ist das allemal...

Ebenso die Meinungen von Winzigweich.

Ich sehe hier keine Meinungen von "winzigweich" - meinst Du einen anderen Thread?

Einfach mal genauer und alles lesen, denn das steht auch noch in meinem Text:

OT und tomjons wird's wohl auch nur beschränkt bei seinem Problem helfen, aber auch das geht kürzer

border:solid 1px #000000;

macht dassselbe wie

border-style:solid;

border-width:1px;

border-color:#000000;[/code]

Aber: Wie eingangs schon erwähnt, soll doch jeder machen, was er für richtig hält Ich bin nunmal der W3C-/Standardkonform/No-Hacks-Geek und Browser sind sowieso alle doof

@tomjons: Was Du Dir einmal durchlesen solltest, sind folgende Links in SelfHTML, damit Du erfährst, warum der IE so komische Sachen macht:

http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug

http://de.selfhtml.org/css/layouts/browserweichen.htm#empfehlung

Im zweiten Artikel ganz am Ende:

Auf der sicheren Seite sind Sie, wenn Sie nach Möglichkeit weitestgehend auf den Einsatz von CSS-Hacks verzichten.

So, muss jetzt los zur Weihnachtsfeier meiner Agentur...

Cheers,

IaN

[skyborg]

Sorry John Steed, dass ist hier nicht der Platz für kilometerlange Fachgespräche. Und sicher auch nicht für "Border-Nachhilfe" auf diesem Niveau. Du (also John Steed) scheinst nicht zu verstehen, was man mit dem border alles machen kann.

Und noch mal zum langsam mitlesen: Wo braucht man bitte bei dem geschilderten Problem irgendwelche Hacks, Weichen etc. für columnleft, columnright und den maincontent? In diesem Zusammenhang war es sicher falsch von mir, des Thema Hack, wenn auch nur global betrachtet, mit anzuführen.

Schönes WE

[John Steed]

Du (also John Steed) scheinst nicht zu verstehen, was man mit dem border alles machen kann.

Sorry skyborg, ich versteh sehr gut was man mit CSS alles machen kann (z.B. Befehle in Kurzschreibung verwenden ), da ich all sowas seit über 10 Jahren täglich in meiner Schule Leuten wie tomjons beibringe - mach Dir bitte um mich keine Sorgen

Jedenfalls müsste tomjons (und alle anderen, die diesen Thread lesen) jetzt wissen, was man bei einem reinen IE-Problem alles tun kann und warum es überhaupt auftritt. Und darum geht's doch, nicht darum, das wir beide hier irgendwie aneinander vorbeireden...

Peace,

IaN

(ja, so heiss ich, der Forenname war aber schon vergeben...)

PS: Wo war denn jetzt nochmal ne Meinung von "winzigweich"?

[skyborg]

CSS wurde entwickelt, um HTML browserübergreifend einheitlich zu formatieren. Laut W3C müssen alle Bestandteile einer Box gleichberechtigt behandelt werden und zur Gesamtbreite und Gesamthöhe einer Box mit beitragen. Der IE sieht das leider etwas anders. Da der IE bekannter Weise von Mircosoft selbst ist, finde ich Ratschläge aus diesem Hause zum Thema CSS immer sehr „spannend“.

Du musst beim IE mit fehlerhaften Interpretationen rechnen, insbesondere beim Zusammenspiel mehrere Abstandsdefinitionen (height, width, margin, padding, border) in einer Box.

Wenn Du Dir meinen CSS-Vorschlag noch einmal genau ansiehst, wirst Du verstehen, welche Funktion hier border hat. Logischer Weise sollten die Nullen bei border noch durch entsprechende Werte für die gewünschten Abstände ersetzt werden.

Für eine W3C konforme Umsetzung von XTC inkl. pixelgenauer einheitlicher Darstellung im allen gängigen Browsern benötigte ich keine Hack, Weichen bzw. Conditional Comments.