IE6 CSS Issues: Background problem fixed, Now I have a list spacing problem...

Sharp101

Ok, I have never encountered this problem before.

I'm about to launch this site for a client, and none of the background images are showing in IE6.

For example, this page: http://coolfire.shiftedmatrix.com/html/your-world/

Looks like this in IE6: http://coolfire.shiftedmatrix.com/ie6.png

My css is this:

[HTML]#wrapper.world_page{
background-image: url('/images/backgrounds/your_world_bg.jpg');
}[/HTML]

What the hell?

(also, if anyone knows what's going on with my menus as well... :P )

SeñorAmor

Close both of your <link> tags in your head. See if that fixes it.

Sharp101

Ooh, that was a good catch. That fixed it.


Now to tackle the menu.

Anyone know if there is a common css list style menu issue in IE6 that resembles mine?

flatlinegraphics

what is the list issue? If it is that they are too spaced out vertically, add height:100% to the nested a tags. That usually puts them back in line.

you should check out a couple of things if you still insist on supporting ie6 (all of our contracts list ie6 compatibility as a separate line item, and costs extra).
http://code.google.com/p/ie7-js/
"upgrades" ie6 to perform like a real browser

http://developer.yahoo.com/yui/reset/#code
css reset - takes care of zeroing out all html elements so that you have a nice clean, blank slate to work from.

lastly, the ie webdev tool helps toooons. adds a blue arrow to your tool bar. click it, click the arrow with a box in the new window, and click around the page. you will be able to edit the css live and find out what the hell ie6 is doing.

also, i still lack a background in ie6.
try
background: url(/images/backgrounds/your_world_bg.jpg) no-repeat top center;
instead. that should force the background to override any thing further down the sheet. and make sure you have your paths correct.

Sharp101

Yup, that totally worked.

Thanks for the help.

Funny thing was, I did use a CSS reset for this project since there was going to be a lot of absolute positioned divs, and I wanted to minimize cross browser layout issues. Luckily these where the only two I had.

I'll also have to definitely charge more for IE6 support in the future. I've just started freelancing this year, so I'm still working things out :P

Thanks for the help guys.

(I'll be implementing that background css change a bit later, when I get to work and can use my VM.)

flatlinegraphics

ie6 hasLayout bugs are the second worst things to debug. whitespace bugs and the dreaded 3px jog... yikes.

but ie7.js and reset have seriously reduced my ie6 debug time and ie6.css sheets to like 5 or 6 lines.