webpage all over the place in IE 7

[jp612]

I just checked my site in IE 7 and some of my divs and pics are all over the place!

 

It works fine in IE 8. What on earth is this?

 

www.debesdesign.com

[virtual]

There is an element which is not loading, probably the Flash, so I could not test the code in IE7. From looking at it in Firebug, I can see that it is a problem with the way you are positioning your divs. You have way too many floats and are using positioning which you do not need.

 

For example for the header and nav, change to this:

#logo {width: 210px; height: 88px;}
and remove top from #navbar and add margin-top: 38px;

if you write the code for the leftpane-left-bottom

#leftpane-left-bottom {
clear:both;
margin-left:10px;
margin-right:0;

 

You will still need to tweak the top margins and I have not corrected the whole page. By the way these corrections work in Firefox too.

[jp612]

Yeah it seem to be working i got the navbar back. Why does IE7 not like positioning? Its compatible with all major browsers... I always thought positioning was a little better than pushing everything around with margins?

 

Also whenever i upload my changes to godaddy the browser often doesnt register the changes for a while. Even though I clear cookies, cache and browsing history. Changes always seem to register after I clear the cookies and cache on my localhost so Im starting to think its more of a godaddy issue.

[jp612]

Phew! its all compatible for IE 7 now. I made some changes and removed alot of floats and positions. I also made a IE 7 only CSS file for the fine touches to the pics on the homepage.