Problem with IE and 3 Column layout

Hi,

Hopefully some one will have an easy answer to this, which I have overlooked.
I am having a random problem with my page on IE6. The link to the page is here http://www.southampton.gov.uk/super.asp If you look at this page and refresh it a few times or reduce your IE window slightly, you will see that the white background ends halfway down the page rather than continue right to the bottom, this only happens every so often. Does any one have any clue why this only does this in IE and only does it occasionally?

Any help would be greatly appreciated.

Here is the CSS code.

/* rounded corners layout */
.roundtop-sm
{
background: url(/images/sm-ntr_tcm9-62146.gif) no-repeat top right;
}
.roundbottom-sm
{
background: url(/images/sm-nbr_tcm9-62145.gif) no-repeat bottom right;
}
img.corner-sm {
width: 7px;
height: 7px;
border: none;
display: block !important;
}
/* box layout */
.nodisplaytext
{
background-color: #9FB3DE;
vertical-align: top;
color: white;
height: 20px;
padding-top: 2px;
padding-right: 5px;
}
.cityweb-logo
{
width: 245px;
float: left;
margin-top: 13px;
margin-left: 3px;
margin-bottom: 3px;
}
.scc-logo
{
width: 56px;
float: right;
margin-top: 3px;
margin-left: 3px;
margin-right: 5px;
margin-bottom: 3px;
}
.iip-logo
{
width: 60px;
float: right;
margin-top: 5px;
margin-left: 20px;
margin-right: 10px;
margin-bottom: 3px;
}
.toolbar
{
width: 775px;
background-color: #FFFFFF;
}
.search-form
{
width: 170px;
float: right;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
.search-form-name
{
font-size: 80%;
font-weight: bold;
}
.search-form-go
{
font-size: 70%;
font-weight: bold;
width: 25px;
}
.breadcrumbs
{
width: 100%;
clear: both;
text-align: left;
margin-top: 1px;
margin-bottom: 1px;
font-size: 80%;
}
/*----- Starts HTML element styles ----- */
a
{
text-decoration: none;
}
img
{
border: none;
}
form
{
margin: 0px;
padding: 0px;
}
h1, h2, h3 {
padding: 0px;
margin: 0px;
text-align: left;
}
h1 {
font-weight: normal;
font-size: 140%;
}
h2 {
font-weight: normal;
font-size: 130%;
}
h3 {
font-weight: normal;
font-size: 120%;
}
/* ----- Starts Class Selectors -----*/
.textual-explaination
{
font-size: 75%;
text-align: left;
}
p.link-lists
{
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 11px;
text-align: left;
}
p.hp-maps
{
text-align: center;
}
.link-lists
{
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
text-align: left;
}
.link-lists li
{
margin-left: 5px;
text-align: left;
}
.link-lists-l1
{
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
text-align: left;
}
.link-lists-l1 li
{
margin-left: 10px;
text-align: left;
list-style-type: disc;
font-size: 80%;
}
.link-lists-l2
{
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 7px;
text-align: left;
}
.link-lists-rhs
{
font-size: 80%;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 5px;
text-align: left;
}
span.summary-spacing
{
height: 10px;
margin-bottom: 20px;
}
span.section-summary
{
padding-left: 10px;
font-size: 85%;
}
img.left
{
float: left;
}
img.right
{
float: right;
}
h3.section-summary {
font-weight: bold;
font-size: 85%;
padding-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
a.section-summary:link {
color: blue;
font-weight: bold;
text-decoration: none;
}
a.section-summary:visited {
font-weight: bold;
color: blue;
text-decoration: none;
}
a.weather-summary {
color: black;
text-decoration: none;
font-size: 90%;
}
a.webcam-summary {
color: black;
text-decoration: none;
font-size: 90%;
}
h2.center-news {
color: black;
padding: 5px 0px;
margin: 0px;
font-weight: normal;
font-size: 130%;
}
p.center-news
{
font-size: 85%;
padding-bottom: 15px;
text-align: left;
}
p.center{
text-align: center;
}
h1.section-heading {
color: black;
padding: 5px 0px;
margin: 0px;
font-weight: normal;
font-size: 130%;
}
h2.section-heading {
color: black;
padding: 5px 10px;
margin: 0px;
font-weight: normal;
font-size: 130%;
vertical-align: top;
float: left;
}
li.whatsnew {
color: black;
padding: 5px 5px;
margin: 0px;
font-weight: bolder;
font-size: 95%;
list-style-image: none;
list-style-type: none;
}
p.citywebname
{
display: none;
}
a.advanced-search
{
font-size: 100%;
}
p.top-tool-bar
{
margin: 0px;
padding : 0px;
font-size: 90%;
text-align: center;
text-transform : lowercase;
}
span.council-address
{
font-size: 80%;
}
/* Search Pages */
.toolbar-top
{
padding : 0px;
width: 100%;
font-size: 100%;
background-color: #FFFFFF;
}
/*------Approved Home Page Styles------*/
.boxheader
{
width: 100%;
clear: both;
}
.banner-image
{
width: 600px;
float: left;
margin-top: 3px;
margin-left: 0px;
margin-bottom: 3px;
}
.boxlogos
{
clear: both;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.boxlogosprint
{
display: none;
}
.search-detail
{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding : 0px;
font-size: 80%;
width: 150px;
font-weight: bold;
background-color: #FFFFFF;
font-family: 'Andale Mono','Courier New', Courier, monospace;
}
.aaa-link {display: none !important}
/*My be able to take this P definition out or at least remove the padding*/
p
{
margin: 0px;
text-align: left;
}
.hp-news-full
{
float:none;
width: 98%;
min-height: 125px;
}
.hp-news-left
{
float:left;
width: 213px;
}
.hp-news-right
{
float:right;
width: 213px;
}
.hp-weather
{
float:left;
text-align: center;
}
.hp-webcam
{
float:right;
text-align: center;
}

img.center-news
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 0px;
float: right;
}
p.weathertext
{
display: none;
}
/* -----Homepage Layout styles----- */
body {
margin-right:50px; padding:0;
margin-left:50px; padding:0;

font-family: Verdana, Arial, Helvetica, sans-serif;
background:#9FB3DE;
}
#header {
margin:0; padding:0;
background:#9FB3DE;
}

#footer {
margin:0; padding:0;
background:#9FB3DE;
}
#main1 {
margin:0; padding:0;
background:url("/images/superleftcolumn.gif") white top left repeat-y;
}
#main2 {
margin:0; padding:0;
background:url("/images/superrightcolumn.gif") top right repeat-y;
}
#main3 {
margin:0; padding:0;
background:url("/images/sm-nbl_tcm9-62144.gif") bottom left no-repeat;

}
#main4 {
margin:0; padding:0;
background:url("/images/sm-nbr_tcm9-62145.gif") bottom right no-repeat;
}
#left {
float:left;
width:173px;
margin:0; padding:0;
background:url("/images/sm-ntl_tcm9-62147.gif") top left no-repeat;
font-size:80%;
}
#right {
float:right;
width:173px;
margin:0; padding:0;
background:url("/images/sm-ntr_tcm9-62146.gif") top right no-repeat;
font-size:80%;
}
#middle {
margin:0 173px;
background:white;
font-size:80%;
}
.column-in {
margin:0; padding:0.5em 1em;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}
.copy { text-align:center; font-size:80% }
.line {
border-style: none none solid none;
border-bottom-width: 3px;
border-color: #9FB3DE;
}

Thanks,

Nick

I don't see a problem with the white background. Unless you've fixed it. I refreshed 5 times and nothing changed. Also on some systems your internet will not fully load 100% of the content, or it will start loading a picture halfway and then stop loading it. I believe this is caused by too much or too large of files on one webpage.

Hi,

Thanks for your reply, it only seems to do it sometimes on my version of IE 6, but for other people in the office, it happens every time they open it or resize the window. I can't seem to work out why it would be doing this. I will have a look at reducing the amount of content on the page, just to rule that out.
Does any one else have any ideas?

Thanks,

Nick

Just in case this helps any one else, I had to put the following in my stylesheet to fix the problem I was having in IE.

* html #middle,
* html #main3,
* html #main4,
* html #column-in {
height:1px;
}

Thanks,

Nick