Darstellungsproblem NUR im IE6 beim Online Shop
 

Hallo an alle!

ich habe gerade, wie soviele andere auch, mal wieder mit der Eigenwilligkeit des IE6 zu kämpfen.
Im Rahmen eines Praktikums geht es bei mir darum CSS Fehler der Webseite zu beseitigen und diese Browserübergreifend zu gestalten. Soweit so gut, nun klappts in allen gängigen Browsern NUR im IE6 nicht.

Das Problem ist, dass der Container "MainContent" viel zu weit unten steht, obwohl "Margin-top:0px" ist. Es ist auch kein clear Teag gleichzeitig drinne und ich bin langsam aber sicher mit meinem Latein am Ende, da es ja in IE7 z.B. ohne Probleme funktioniert. Auf der eigentlichen Seite ist es die "Hauptrubrik", sprich die in der Mitte.

Gibts es vielleicht untereuch welche die sich besonders mit der Eigenartigkeit des IE6 auskennen und mir unter umständen helfen können??? Wäre ich sehr dankbar dafür!!

Hier der Link zur Seite:

Monsterzeug: Coole Geschenke, Gadgets und Geschenkideen

hab erstmal überlegt das CSS hier zu posten, aber dann wäre Beitrag wohl unendlich lang. Die kompletten CSS Anweisungen, kann man sich ja mit die WebDevelopers PlugIn für FF angucken, hier nur der Auszug des fraglichen div's:

#MainContent{

margin: 0 207px 0 211px;

padding: 0;

}


Vielen Dank schonmal im Voraus!

Tkay

Vermutlich hast macht dir der IE 6 Probleme mit der Berechnung der Breite der Blöcke. Da kann es regelmäßig Probleme geben...

Ich würde empfehlen, für den IE6 eine einzelne css-Datei mit allen Ausnahmen anzulegen und sie im Head mit folgender Zeile einzubinden:

<!--[if lt IE 7]><link rel="stylesheet" href="---hier der link zur ie6-datei---" type="text/css" media="screen" /><![endif]-->

[if lt IE 7] bedeutet: wenn ie unter version 7 dann auswerten

hmm okay, soweit so gut. Aber wo genau könnte jetzt das Problem bei der größe der Blöcke liegen? Bzw. wie kann ich diese dem IE6 am besten verständlich machen?

wenn du die ie6-css Datei angelegt hast, solltest du mit den Paddings, Margins, gegebenenfalls Borders und der Breite herumexperimentieren. Einfach extrem anfangen und schauen, wo der Fehler liegen könnte.

Hey! Also unächstmal vielen Dank für die Tipps! habe das "Patch" Stylsheet eingebunden und es wird auch erkannt.

Allerdings ist das so ein unglaublich CSS Wirrwar das ich da Tage mit "try and error" verbringen würde. Also ich habe damit schon angefangen und denke/hoffe das ich das nun besser eingrenzen kann, vllt. ist es auch ein sehr verbreitetes Problem.

Wenn man auf die monsterzeug.de Seite guckt dann gibt es ja im Grunde drei spalten: links: Kategorien, newsletter etc. mitte: Neues Produk, darunter Willkommen und dann die restlichen Produkte rechts: Kundenlogin, Bestseller etc.

Wenn man die Seite mitm IE aufruft fängt der Mittlere Inhalt nicht da oben an (sprich parallel zu links und rechts) wie die anderen Spalten, sondern weit unten und zwar GANZ GENAU da wo die beiden Spalten Enden. Sprich es entsteht der Eindruck als wäre das ein leerer Container (ists aba nicht) vorgeschoben.

Habe aktuelle eine Trestinstallation laufen (habe die millere Spalte zu testzwecken mit margin-top:-50px; hoch gezogen und im IE6 wird es nun so angezeigt, dass der Inhalt der mittleren Spalte nur z.T angezeigt wird. Also es sieht halt so aus, als wäre der Inhalt der mittleren Spalte, der sich zwischen der linken und rechten spalte befindet genau dort "abgeschnitten"

Hier der Screenshot...hoffe das hilft weiter!

http://www.thomas-kaleta.de/screen.jpg

Danke schonmal im Voraus!

Eventuell könntest du probieren, am z-index etwas zu verändern. Es kann sein, dass sich eine Box über den mittleren content legt. Je höher der z-index Wert desto weiter im Vordergrund der Bereich...

Ich hoffe, das hilft :)

Im Moment sieht es im IE6 gut aus.

Aber warum zentrierst du nicht mit margin: 0 auto;? Deine Methode lässt den linken Rand ins Nirvana segeln, wenn das Fenster verkleinert wird.

hey! Aslo ich hab das jetzt tatsächlich mit margin:0 auto; zentriert (war mir vorher nicht aufgefallen). Das Problem bleibt aber leider bestehen. Hate dem #contentMain (sprich der Hauprubrik) einfach position:absolute; zugewiesen und da mir margin's an die "richtige" Stelle zentriert. Problem ist nur dass das die restlichen divs "Zerschossen" hat. Z.B. hat sich die Footerposition, nicht mehr dem Größeninhalt der #contentMains angepasst, sondern stand z.T. durch die Mitte der Produkte. Ausch scheint mir das allg. eine recht amateurhafte Läsung zu sein, die augenscheinlich nciht gut funzt. Hat sonst jemand vielleicht noch eine Idee??? oder weiss warum der mittlere div nicht zwsichen dem linken und recht angezeigt wird?? Dankez schonmal im Vorraus!

Ich sehe im Moment keinen Grund, irgendwas absolut zu positionieren. Zeig doch mal eine URL zu einem Beispiel und formulier deine Problemstellung bitte so, dass man sie morgens ohne Kaffee schon verstehen kann.
Geht es immer noch um den IE6?

Hi IChao!

also es geht NUR um den IE6, in FF und IE7 wird alles richtig dargestellt.

Hier der Link zur fraglichen Seite:

Monsterzeug: Coole Geschenke, Gadgets und Geschenkideen

oder hier ein Screenshot:

http://www.thomas-kaleta.de/screen.jpg

Die Probleme sind folgende:

a. Die Seite ist drei Spalten aufgeteilt:

1.Spalte (#NaviLeft): Kategorien, Newsletter, Bewertungen
2.Spalte (#MainContent): Produktansicht
3.Spalte (#NaviRight): Kunden LogIn, Bestseller

Im IE6 ist nun das Problem, dass die 2. Spalte nicht auf einer Höhe mit der 1. und 3. angezeigt wird. Die Produktdarstellung/Übersicht fängt erst sehr weit unten an bzw. erst ab dem Moment wo die 1. und 3. Spalte "zu Ende" ist.

b. Das zweite Problem ist, dass in der 3. Spalte (Kunden LogIn, Bestseller) die Größenverhältnisse im vergleich zum FF nicht stimmen. Im IE6 scheinen die Abstände in den Boxen und die Vorschaubilder bei "Bestseller" viel größer zu sein,als im Firefox.

Ich hoffe mit der Problembeschreibung kannst du jetzt etwas anfangen:)

thnx,

Tkay