Major IE8 positioning issues.

Question

Hello. I know its a not a new concept that my site is perfect on FF,Safari and Chrome but jacked up on IE8. That being said and cutting to the chase. This is the home page that I am working on for a social network for people with CysticFibrosis.

http://www.cysticlife.org/Home.php

If you can, look at it in FF,Safari and Chrome, and then in IE8 and you will see the issues. I am assuming its a positioning issue since some of the images are not showing up but are there,and some of my j-query is disabled.. I do NOT have IE8 so its hard for me to troubleshoot this. I have a clearfix fix and I was under the impression that IE8 had the clearfix problem taken care of.

If you know what this may be and want to help,please let me know what code you would like me to put on here in order to help solve the problem.

Thanks so much in advance.

Answer 1

After a quick investigation, we can see that the images that work in FF and IE8 are all loaded using img tags, and the images that work in FF but don't work in IE8 are all loaded using CSS background-image. This tells us that something in your background-image declaration is throwing IE8 off, so your problem is not clearfix or positioning, it's simply that IE8 doesn't understand the specific CSS being used to load background images.

Looking at the CSS for the #site_map background image, it looks extremely innocuous and I couldn't immediately spot anything wrong with it:

#site_map {
    width:984px; 
    margin:30px auto 0px auto; 
    height:200px; 
    background:url(images/site_map.png)no-repeat;
}

Still, it definitely has to be the CSS, so I did a quick Google search for "css background image not showing in IE8". One of the first hits was actually another Stack Overflow question:

http://stackoverflow.com/questions/2481222/background-image-not-showing-up-in-ie8

And I suspect the answer that worked there will work for you too:

Try adding a space between ) and no-repeat.

Yeah. Even modern versions of IE are still pretty quirky :(

Answer 2

You already have a great answer, but I wanted to give you a resource so you don't actually have to install IE8.

http://www.spoon.net/Browsers/

You can use this site to test IE6-9, FF2-4, Chrome 5-6, Safari 3-5, and Opera 9-10. It's a really excellent tool!