CSS Compatibility IE7 - IE8 problem

Question

Problem:

Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.

I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?

URL: http://www.testsite.c-tz.nl/

If you view this with IE8 it looks perfect.

But if you view it with IE7, things are not where they supposed to be, very ugly.

Answer 1

This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...

1.use javascript to detect the browser and version..

2.later use the similar way to redirect the visitor to download the IE 8..

<script>
 if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{

alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43" 
}
//document.write(''+browserName+''+fullVersion+''); 
</script>

Answer 2

As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.

One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.

BTW, you have far too many div s in your HTML. It's not necessary to wrap every img , every ul , etc. in it's own div . Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.