IE6 - Background img missing, extra pixels in header, and most content off center...

Question

Having major issues getting my wordpress website to display correctly in IE6.

Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.

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

FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.

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

Any ideas??

Link: www.genevarealtytrust.com/content

I've validated my code, and have tried a few things, but no success.

Help! Appreciate it!

Answer 1

This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.

Answer 2

You can try using conditional styles. In document's head section paste:

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

Now You can start editing ie.css without worrying about spoiling design for other browser.

Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining

#something {
margin: 0; 
padding: 0;
}

explicitly in Your new css.

No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:

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

Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:

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

I hope this will help solve any of Your problems :)

Answer 3

Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.

Centering Issue/Missing Background Image:

I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)

Extra pixels:

What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.

Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...

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

I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)

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

I still have an extra pixel on the right side that I'm trying to resolve - still investigating.