✔ Zerrissenes Layout im IE 6 (und jünger)

Status
Nicht offen für weitere Antworten.
O

Ogre

Mitglied
Nabend Leute,

Mir bereitet ein neues Projekt Sorgen:
Ich habe das Grundgerüst bereits zusammengeflickt, das ganze in HTML und CSS validieren lassen und der Firefox zeigt alles wunderbar an. Genauso der IE 7.

Allerdings wird das Layout beim Betrachten mit dem IE 6 komplett verzogen.
Kann mir jemand sagen woran das liegt?

Hier das Grundgerüst:
Basislayout

(Dazugehörige CSS Datei)


Edit:Wer keinen IE6 mehr hat kann sich das ganze hier ansehen.
http://meineipadresse.de/netrenderer/index.php
 
Zuletzt bearbeitet:
Hi,

leg dir eine zweite CSS-Datei (z.B. style_ie.css) an, und nimm darin diese Selektoren mit folgenden Korrekturen und Ergänzungen auf:

Code: 
#MenueContainer {
margin-left: 5px; /* Double-Margin-Bug */
margin-right: -3px; /* 3px-Gap-Bug */
}

#HeaderContainer {
margin-left: 207px; /* 3px-Gap-Bug */
}

#Content {
margin-left: 197px; /* 3px-Gap-Bug */
}

.form1 {
margin-left: 12.5px; /* Double-Margin-Bug */
}

.form2 {
margin-left: 7.5px; /* Double-Margin-Bug */
}

.suchen {
margin-left: 7.5px; /* Double-Margin-Bug */
}
Das Stylesheet rufst du dann mit einem "Conditional Comment" auf:

Code: 
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]-->
 
Hallo, ich habe ein ähnliches Problem, weiss aber nicht wie ichs lösen soll :(
Kann mir jemand sagen, welche Parameter ich an meinem Design für IE ändern muss, bitte?
Im Firefox sieht das ganze echt toll aus, aber im IE *grusl*...

Layout steht hier: http://df01.kilu.de/index.html
PS: Das Logo oben rechts ist erstmal nur Platzhalter, also bitte nicht wundern.
 
Hi,

vermutlich liegt's am DIV #header und der min-height-Eigenschaft, die vom IE6 nicht unterstützt wird.

Versuch daher mal Folgendes:

Code: 
#header {
  position:relative;
  left:0px;
  right:0px;
  top:0px;
  min-width:780px;
  min-height:140px;
  height: auto !important; /* !important-Regel für moderne Brower */
  height: 140px; /* Für IE (<7) */
  background-color:transparent;
}
 
Danke dir, keine Ahnung warum ich da min-height reingeschrieben habe. Habs jetzt auf height geändert und du hattest recht, jetzt wird schonmal der header ordentlich angezeigt. Soo das nächste was ich sehr komisch finde ist, dass der IE die Wiederholung des Farbverlaufes oben im Header und den wiederholten Farbverlauf des "Bogens" nicht anzeigt. Andererseits wird der Farbverlauf unterm Menü richtig angezeigt. Kannst du oder vielleicht jemand anderes sagen, woran das liegt und was ich dafür ändern muss?

EDIT: Hier der neue Link: http://df01.kilu.de/test3/

Grüße flash

EDIT²: Ich hab es hinbekommen, dass es im IE genauso aussieht wie im Firefox :) Danke für den Hinweis mit dem !important
--
 
Zuletzt bearbeitet:
Schonmal vielen Dank, die Änderungen haben alles gerade gerückt...

Jetzt habe ich weitergearbeitet und schonwieder tauchen Fehler bei der Darstellung mit dem IE 6 auf.

Hier erstmal die Links:

http://home.arcor.de/spellsource/marktplatz/Formular.html
http://home.arcor.de/spellsource/marktplatz/style.css
http://home.arcor.de/spellsource/marktplatz/styleie.css

Drei Probleme gibt es:
1) Der Hover-Effekt wird nicht angezeigt
2) Die Rote Float-Box verschiebt das Content nach unten. Warum? Float ist doch an!
3) Die Tabelle wird vollkommen chaotisch angezeigt und lässt sich auch nicht mit align-formatierung bändigen.

Wäre super wenn mir nochmal jemand weiterhelfen könnte :)
 
Hi!

  • Der IE6 (und jünger) unterstützt die hover-Pseudoklasse ausschliesslich für das a-Element, und nicht für die übrigen HTML-Elemente, wie in deinem Fall das div-Element.

    Üblicherweise wird eine Navigation mit dem Listenelement strukturiert und anschliessend mit CSS formatiert - siehe hierzu auch die Beispiele auf Listamatic - dann klappt's auch in den älteren IE-Versionen mit dem hover-Effekt.

  • Verwende mal (ausschliesslich) diesen Code für die styleie.css:
Code: 
#MenueContainer {
margin-left: 5px; /* Margin Bug */
margin-right: -3px; /* 3px-Gap-Bug */
}

#HeaderContainer {
margin-left: 207px; /* 3px-Gap-Bug */
}

#Ads {
width:185px;
height:100px;
padding-top:5px;
padding-left:5px;
}

#Content {
margin-left:197px; /* 3px-Gap-Bug */
}

.form1 {
margin-left:5px; /* Margin Bug */
}

.form2 {
margin-left:7.5px; /* Margin Bug */
}

.suchen {
margin-left:7.5px; /* Margin Bug */
margin-top:22px;
}


#text {
margin-left:10px; /* Margin Bug */
}
Alle übrigen Selektoren und Eigenschaften aus der style.css müssen in diesem Stylesheet nicht wiederholt werden, da sie ja "deckungsgleich" sind, und der IE zunächst das "normale" und anschliessend sein individuelles CSS in das Dokument lädt. Hierbei werden dann die zuvor eingelesenen Eigenschaftswerte durch die neuen überschrieben.


  • Dazu kann ich momentan nicht viel sagen, da ich nicht weiß, was du dir konkret vorstellst, und die Tabelle in allen mir zur Verfügung stehenden Browsern einheitlich dargestellt wird.

    Mir ist aber aufgefallen, dass du den Formularbereich nicht mit dem form-Element umschlossen hast, dafür aber das <form>-Tag mehrmals vor input-Elementen notiert hast.
 
Danke Danke, das hilft schonmal teilweise weiter.

Der Hovereffekt ist nicht so furchtbar wichtig, der macht die Seite ja nicht benutzerfreundlicher. Insofern kann das beim IE 6 so bleiben.

Was die Tabelle angeht... hmm... keine Ahnung. Sie lässt sich einfach nicht formatieren, weder im HTML noch im Stylesheet.

Jetzt hab ich allerdings noch ein Problem. Bei der folgenden Seite findet die Verschiebung immernoch statt:

http://home.arcor.de/spellsource/marktplatz/Markttermine.htm

Wäre schön wenn du mir sagen könntest wo hier der Wurm drin ist :)
Danke!
 
Der Wurm liegt in den Breitenangaben für die DIVs #suchmenue und #termine.

style.css:
Code: 
#suchmenue {
position:relative;
margin-left:0px;
margin-top:0px;
height:60px;
/*width:580px;*/ /* auskommentiert = deaktiviert */
}

#termine {
position:relative;
margin-left:0px;
margin-top:0px;
height:auto;
/*width:580px;*/ /* auskommentiert = deaktiviert */
margin-bottom:80px;
}

styleie.css
Code: 
#suchmenue {
position:relative;
margin-left:0px;
margin-top:0px;
height:60px;
/*width:580px;*/ /* auskommentiert = deaktiviert */
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück