Hi there,

I have just updated to internet explorer 7 and whilst I'm fairly impressed my site now has some faults...

Firstly the height of the site is duplicated and there is lots of whitespace in the mainframe area and secondly a margin i put along the left side of my right side div is now not displaying!!

Would appreciate any ideas as to what to change to get this right in IE7 aswell as styaing ok in IE6...

I only just mastered it for IE6!! Doh!

Thanks!

Here is my css below...

* {
 padding: 0;
 margin: 0;
}
body {
 background-color: #E8F0FF;
 font-family: Arial, Helvetica, sans-serif;
 color: #666666;
 font-size: 11px;
}
#wrapper {
 width: 804px;
 margin: 0 auto;
 Apply overflow: hidden;
}
#navbar {
 border: 1px solid #ccc;
 margin: 0px 5px 0px 5px;
 padding: 4px;
 background-color: #FFFFFF;
}
#header {
 /*border: 1px solid #ccc;*/
 margin: 20px 5px 0px 5px;
 height: 122px;
 padding: 10px;
 background-color: #FFFFFF;
 background-image: url(../Images/Header.jpg); background-repeat: no-repeat; 
}
#leftcolumn { /* Parent Wrapper for inside boxes */
 margin: 0 0px 0px 5px;
 display: inline; /* IE Hack */
 width: 20%;
 float: left;
 min-height: 690px;
 padding: 5px;
 /*border: 1px solid #ccc;*/
 background-color: #FFFFFF;
 background-image: url(../Images/COLUMN.jpg); background-repeat: no-repeat;
 padding-bottom: 10000px;
 margin-bottom: -10000px;
}
* html #leftcolumn {height:690px} /* IE Min-Height Hack */ 

#centercolumn { /* Parent Wrapper for inside boxes */
 /*border: 1px solid #ccc;*/
 margin: 0px 0px 0px 0px;
 display: inline; /* IE Hack */
 padding: 5px;
 width: 55%;
 float: left;
 min-height: 690px;
 background-color: #FFFFFF;
 padding-bottom: 10000px;
 margin-bottom: -10000px;
}

#centercolumn2 { /* Parent Wrapper for inside boxes */
 /*border: 1px solid #ccc;*/
 margin: 0px 0px 0px 0px;
 display: inline; /* IE Hack */
 padding: 6px;
 width: 76%;
 float: left;
 min-height: 690px;
 background-color: #FFFFFF;
 padding-bottom: 10000px;
 margin-bottom: -10000px;
}
* html #centercolumn {height:690px} /* IE Min-Height Hack */ 

#rightcolumn {
 margin: 0 5px 0px 0px;
 padding: 5px;
 display: inline; /* IE Hack */
 width: 20%;
 float: left;
 /*border: 1px solid #ccc;*/
 background-color: #FFFFFF;
 min-height: 690px;
 padding-bottom: 10000px;
 margin-bottom: -10000px;
}
* html #rightcolumn {height:690px} /* IE Min-Height Hack */ 

#footer {
 background-color: #FFFFFF;
 margin: 0px 5px 5px 5px;
 display: inline; /* IE Hack */
 padding: 4px;
 float: left;
 width: 97.7%;
}
#adverts {
 padding: 8px;
 float: left;
 width: 97.7%;
}

I don't have IE7 so I can't tell what the problem is directly, but try looking at this site about the white space problem.

http://veerle.duoh.com/blog/comments...hantom_spaces/

For one thing, you're going to have to eliminate the CSS hacks from your main CSS file and use conditional comments to target versions below IE 7. The *html hack won't work in IE 7, as is the same problem with most hacks we had.

I now use 3 CSS files for every page - a main that holds all the CSS for standards-compliant browsers, an "iefixes" css file for hacks for older versions, and an "ie7fixes" file for any needed IE 7 'hacks' (which I haven't needed.. yet).

You might want to read this article:
http://www.positioniseverything.net/...-dehacker.html

Thanks for the advice and links guys...

I like the 3 different css files idea...

Never imagined web design would be so querky when I decided to attempt it...

Trying to get a site that looks good in different browsers, resolutions and user preferences is soooo difficult!!!

The journey continues...