float:left nicht in ie6 ?

[thewipe]

Hallo zusammen,

ich habe mir ein Seitenlayout erstellt (mein erstes in css). Als Grundlage diente mir das Tutorial: Homepageworkshop #2 hier von psd-tutorials.

In meinem Firefox und IE 8 siehts auch so aus, wie ich es mir vorstelle:



Der IE 6 versemmelt allerdings zu ziemlich viele Formate, so wird z.B. das float nicht mehr umgesetzt. Das will ich als erstes mal in den Griff bekommen:



Hier der Direktlink zu der Page:



Das Floatproblem ist mitlerweile durch Löschung aller Kommentare im css gelöst (???)



Ich habe CSS und HTML validieren lassen, mit positiven Ergebnis. Ich habe auch schon wie wild gegoogelt und hier gesucht. Eine Breitenangabe im content hat auch keine Abhilfe geschaffen.

Ich weiß auch, das der IE oft auch besondere Befehle braucht, die ggf. über ne extra css per if aus dem html geladen werden kann. Nur find ich irgendwie nicht den Punkt, damit das Layout auch im IE 6 passt. Eigentlich sollte er es ja auch grds. hinbekommen, vieleicht mit ein paar Pixelverschiebungen wegen der Border uns so, aber soweit bin ich ja nichmal...

Hat da jemand eine Idee? - Danke schonmal!!!

P.S.: reicht der Link? - Damit habt ihr ja auch Zugriff auf die css und den Quellcode der html. Oder soll ich das hier (irgendwie) mit reinposten?

 

[Pixus]

AW: float:left nicht in ie6 ?

habe das gerade mit meinem IE6 geprüft und es sieht bei mir sehr ähnlich aus wie die Anzeige im Firefox. Das einige Problem ist der linke Abstand von Deinem HOME-Link. Der rutscht ein wenig ins Blaue.

 

[Samuelll]

AW: float:left nicht in ie6 ?

Hallo,

der Link reicht um alles anzusehen.

Soweit ich mich entsinne benötigen gefloatete Elemente immer eine Breite. Das könnte ggf. der Grund sein wieso deine Navi sich so weit ausdehnt.

Weiterhin is mir Dein Floating nicht ganz klar. Das erste Element hast du noch mit Float versehen, das Content-Element nur über Margin auf Abstand gesetzt.

Du könntest auch den Content (Breitenangabe nicht vergessen) floaten, und im HTML hinter den Content ein Element mit der

Class=clear versehen

.clear {clear : both; /*In Deinem Fall würde auch clear : left; reichen*/}

Einziger "Nachteil" hierbei ist, dass man hinter jede Gruppe von gefloateten Divs noch ein clearendes Div setzen muss.

Nicht perfekt, funktioniert aber.

 

[thewipe]

habe das gerade mit meinem IE6 geprüft und es sieht bei mir sehr ähnlich aus wie die Anzeige im Firefox. Das einige Problem ist der linke Abstand von Deinem HOME-Link. Der rutscht ein wenig ins Blaue.

Danke schonmal für die schnelle Reaktion!

mhm, das versteh' jetzt mal einer der will...

Ich habe den IE6 von der Arbeit getestet, da ich den nicht installiert habe. Da klappt mal garnix. CSS nimmt er aber grundsätzlich an. Wenn ich an den Schriften rumbastel, nimmt er da auch an. Könnte sein, dass da ne Sicherheitseinstellung weitere Befehle unterdrückt? - Allerdings sind mir solche Fehler bei noch keiner anderen Internetseite auf der Arbeit aufgefallen.

Das verschieben des Homebuttons könnte an der falschen Berechnung der Box-Größe durch den IE entstehen, obwohl das im IE8 korrekt dargestellt wird. Ist da der bug gefixt worden?

Hat noch jemand Ideen zur IE6 Problematik? - Ich versteh' gar nicht, dass die Seite im gleichen Browser unterschiedlich dargestellt wird...

Hallo,

der Link reicht um alles anzusehen.

Soweit ich mich entsinne benötigen gefloatete Elemente immer eine Breite. Das könnte ggf. der Grund sein wieso deine Navi sich so weit ausdehnt.

Weiterhin is mir Dein Floating nicht ganz klar. Das erste Element hast du noch mit Float versehen, das Content-Element nur über Margin auf Abstand gesetzt.

Du könntest auch den Content (Breitenangabe nicht vergessen) floaten, und im HTML hinter den Content ein Element mit der

Class=clear versehen

.clear {clear : both; /*In Deinem Fall würde auch clear : left; reichen*/}

Einziger "Nachteil" hierbei ist, dass man hinter jede Gruppe von gefloateten Divs noch ein clearendes Div setzen muss.

Nicht perfekt, funktioniert aber.

Auch Dir danke für die schnelle Antwort!

Die Seitenbox-links habe ich ja auf width:115px; deswegen verstehe ich schnomal nicht, warum der IE die Leins so weit rüberzieht. Den Content hatte ich auch schonmal ne breite vorgegeben (extra kleiner als der verfügbare Platz), hat aber auch nix gebracht.

Wenn ich dem Content noch float:left (oder auch right); und width:550px; zugebe, erscheint er im Firefox unter der Seitenbox, nicht mehr daneben. Muss ich da noch ein weiteres Attribut setzen (position)?

die clear Geschichte währe nicht so tragisch, da der footer eh' einen clear enthält, damit er unter Seitenbox und Content gesetzt wird.

Da es bei Pixus IE 6 scheinbar korrekt erscheint, besteht die Frage, ob ich tatsächlich nen Fehler im CSS habe, oder ob man da was, z.B. per Sicherheitsrichtlinien, ausschalten kann. Verwunderlich allerdings, das mein Arbeits-IE alle anderen Seiten korrekt darstellt...


Edit:
Jetzt zeigt auch der Arbeits-IE die Seite einigermaßen korrekt an! - Was habe ich gemacht? - Ich habe lediglich die Bemerkungen gelöscht!
Den Zusammenhang verstehe ich nunmal gar nicht, aber wenns so funktioniert. Ich weiß ja jetzt so langsam, was ich da programmiert habe, dann brauch ich mir auch nicht mehr alles kommentieren.

Jetzt noch die "kleineren" IE-Bugs ausmertzen, wie diese komische 3-pixel-Geschichte beim clear nach dem float, so wie der doppelte-padding-bug, der wohl für die verschobene Head-Navigation verantwortlich ist, dann hab ichs wohl.

Wenn ich mich daran setze, melde ich mich warscheinlich nochmal ;-)

Hier noch der Link zur aktualisierten Version:

 

[Samuelll]

AW: float:left nicht in ie6 ?

Wenn du 2 Boxen via Float nebeneinander setzen möchtest, sie aber untereinander erscheinen und das Foat korrekt ist, dann liegt es meist daran, dass beide Boxen zusammen breiter sind, als das sie umschliessende Element.

Bei einigen Seiten wo das Neuladen "auf einmal" eine Änderung macht, liegt es schlicht und ergreifend am Browser-Cache. Dort lag ggf noch eine alte Version, die angezeigt wurde.

Und bei Kommentaren kann es durchaus sein, dass der öffnende oder schliessende Tag eines Kommentars (/ * oder */) nicht richtig geschlossen/geöffnet wurde. Damit wird dann die CSS-Anweisung nicht korrekt wiedergegeben und die Ausgabe ist Fehlerhaft.

 

[thewipe]

AW: float:left nicht in ie6 ?

Wenn du 2 Boxen via Float nebeneinander setzen möchtest, sie aber untereinander erscheinen und das Foat korrekt ist, dann liegt es meist daran, dass beide Boxen zusammen breiter sind, als das sie umschliessende Element.

Deswegen hatte ich dem Content mal direkt 100 pixel weniger gegeben, als tatsächlich an Platz da war. Um dieses Problem auszuschließen, hatte aber auch nichts gebracht (schien ja nu auch nicht an der Größe gelegen zu haben).

Bei einigen Seiten wo das Neuladen "auf einmal" eine Änderung macht, liegt es schlicht und ergreifend am Browser-Cache. Dort lag ggf noch eine alte Version, die angezeigt wurde.

Auch daran habe ich gedacht, und die Seite sogar mal unter nem ganz anderen Link hochgeladen, bzw. auch noch andere Änderungen vorgenommen, die aber übernommen wurden.

Und bei Kommentaren kann es durchaus sein, dass der öffnende oder schliessende Tag eines Kommentars (/ * oder */) nicht richtig geschlossen/geöffnet wurde. Damit wird dann die CSS-Anweisung nicht korrekt wiedergegeben und die Ausgabe ist Fehlerhaft.

Das ist mir im vorliegenden Fall eigentlich die plausibelste Erklärung, wenn ich nicht auch daran mal gedacht hätte ;-) So ist mir das durch Zufall bei Löschung eines Komentares aufgefallen, in der Original CSS war der aber korrekt geöffnet und geschlossen.

Naja, irgendwas habe ich da wohl falsch gehabt, womit ich die ganze css für den IE 6 zerschossen habe. Immerhin befinden sich ja 90% aller Computerfehler zwischen Tastatur und Stuhl :-D

 

[bambi123]

AW: float:left nicht in ie6 ?

Erstellst du dein CSS und dein HTML im Editor selber oder mit Programmen? Ich habe es schon mehrfach erlebt, das wenn ich ein HTML Dokument mit einem Programm erstelle, es nicht so aussieht wie es eigentlich sollte. Alles Korrekt geschrieben usw. Nehme ich einen normalen Editor und schreibe alles nochmals da selber rein, funktioniert es plötzlich, auch wenn ich es aus dem anderen rauskopiere und beim Editor wieder rein. Komisch oder?

 

[thewipe]

AW: float:left nicht in ie6 ?

So den Bug mit der Head-Navi habe ich mit display:inline in den Griff bekommen. Den 3-Pixel-Bug habe ich mit * html #content {height: 1%} ausgemerzt. Einfach in der css nach der content-div.

Wenn ich mich jetzt noch um die first-child-Problematik kümmer, müsste auch der IE 6 vollends zufrieden sein. Aber nicht mehr heute ;-)

Erstellst du dein CSS und dein HTML im Editor selber oder mit Programmen? Ich habe es schon mehrfach erlebt, das wenn ich ein HTML Dokument mit einem Programm erstelle, es nicht so aussieht wie es eigentlich sollte. Alles Korrekt geschrieben usw. Nehme ich einen normalen Editor und schreibe alles nochmals da selber rein, funktioniert es plötzlich, auch wenn ich es aus dem anderen rauskopiere und beim Editor wieder rein. Komisch oder?

Aktuell im Editor (Notepad++), hab' aber ähnliches auch schonmal bei Kompozer und nem Tabellenlayout gehabt. Aber wysiwyg und Tabellenlayout gewöhn ich mir ja gerade ab ;-)