IE6 - Hintergrund img fehlt, zusätzliche Pixel in der Kopfzeile und die meisten Inhalte aus der Mitte

Question

Große Probleme haben meine Wordpress-Website korrekt in IE6 angezeigt.

Link zum Screenshot unten. Mein Hintergrundbild fehlt, das Nav ist um ein paar zusätzliche Pixel abgerissen und der größte Teil meines Inhalts ist außermittig.

www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg

FF Screenshot (unten verlinkt) ist, wie es aussehen sollte. Habe es in Safari versucht, ein paar Versionen von Firefox und IE7, und alle sehen genau so aus, wie sie sollen. IE6 ist der einzige, der mir Probleme bereitet.

www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg

Irgendwelche Ideen ??

-Link: www.genevarealtytrust.com/content

ich meinen Code bestätigt haben, und haben ein paar Dinge ausprobiert, aber kein Erfolg.

Hilfe! Bin dankbar!

Answer 1

Dies ist nicht wirklich eine Antwort auf Ihre Frage (und da ich nicht genug rep zu kommentieren :)), aber versuchen Sie es durch this list der üblichen IE CSS Bugs. Es hat mir geholfen, einige Knicke in meinem CSS auszuarbeiten, aber IE 6 ist eine Kriegszone. Ansonsten würde ich wirklich vorschlagen, das fantastische Buch Bulletproof Web Design zu bekommen.

Answer 2

Sie können versuchen, bedingte Stile zu verwenden. In dem Dokument des Kopf Abschnitt Paste:

<!--[if lte IE 6]> 
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" /> 
<![endif]--> 

Jetzt können Sie beginnen ie.css Bearbeitung ohne sich Gedanken über Design für andere Browser zu verderben.

Zusätzlicher Platz um nav: IE hat manchmal Standardränder/Abstände, die sich von anderen Browsern unterscheiden. Versuchen Sie zu definieren

explizit in Ihrem neuen css.

Kein Hintergrund: Vielleicht ist es die Ausrichtung. Versuchen Sie etwas wie "oben links" zu Ihrer Hintergrundbilddefinition hinzuzufügen. Beispiel:

background-image: url('../img/site-bg.jpg') no-repeat scroll top right; 

Inhalt zentrieren: In CSS gibt es zwei Möglichkeiten, Inhalt zu zentrieren. Zuerst: Setzen des Elternelementes text-align Eigenschaft zu Mitte;. Zweitens: Definition Breite und Einstellung Marge bis oben-unten-Rand-Wert Auto;. Beispiel:

#something { 
width: 100px; 
margin: 10px auto; 
} 

Ich hoffe, dass dies irgendwelche Ihrer Probleme helfen zu lösen :)

Answer 3

Danke für die Tipps Jungs! Daveslab, ich werde diese Liste auf jeden Fall griffbereit halten und danke für die Buchempfehlung.

Zentrieren Ausgabe/Fehlendes Hintergrundbild:

machte mir die alternativen CSS-doc und das gab mir mehr Raum zu experimentieren - ich in der Lage war, das fehlende Hintergrundbild und Zentrierung Problem zu beheben, indem Sie die CSS eines wenig vereinfachen für den problematischen Abschnitt durch Versuch und Irrtum. (Entfernt Schwimmer, Position ...)

Extra-Pixel:

Was schließlich Festsetzung endete die drei Pixel auf dem Boden meines Kopfes war ... einfach nur dumm.

Offensichtlich IE6 wurde die Anwendung zusätzliche 3 Pixel auf dem Boden des Header-Bild, weil mein HTML-Code für die div in drei Zeilen aufgeteilt wurde ...

<div id="header"> 
<img src="url" /> 
</div> 

musste ich einfach sie alle in eine kombinieren Linie, und die zusätzliche Polsterung auf dem Boden verschwand. Dumm ... (und hässlich)

<div id="header"><img src="url" /></div> 

Ich habe noch einen zusätzlichen Pixel auf der rechten Seite, die ich zu lösen bin versucht - noch untersucht.