IE6 .clearBoth and header

Hello

In IE6 the .clearBoth css class creates a white box in the header in the site I'm bulbing. Here is an image of the problem .

Does anyone know how I can get rid of it?

Darren

A url will help you get more accurate answers. :smile:

.

The URL is http://www.beatrice-bray.co.uk In other browsers the white box doesnt appear. I tried removing the .clearBoth class but as expected that didn't work as it poshed all the main content over to the right.

The header wrapper is set to have the orange background, so I would have thought that all nested ids and classes would inherit those values.

May be you have a </div> more, it seems should not be there.

<!--eof-branding display-->
<!--eof-header logo and navigation display-->

<!--bof-header ezpage links-->
<!--eof-header ezpage links-->
[b]</div>[/b]

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>

Oops!
Sorry, false alarm! :blush:

The following seems fix the problem. :smile:

#tagline {
	color:white;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	background: #F06A26;
	height: 90px; /* add equal to the logo's height  */ 
	}

seethrou:

The following seems fix the problem. :smile:

#tagline {
color:white;
font-size: 2em;
text-align : center;
vertical-align: middle;
background: #F06A26;
height: 90px; /* add equal to the logo's height */
}

Thank you so much, that's done it. There is a slight problem now in ff, now with the screen width  re-sized to about 850px the tagline text can overspill on to the breadcrumb but I can live with that - after all how often does that happen.

Thanks again for your help

Darren

May be trim off some part of the right side of the logo (the red color part), and the left side with graphic is only about 530px) of the logo.
Since the right side of you logo are same color with the tagline and other area.
This may give more spaces to the tagline to swing if the width is not sufficient.

.

Some more refinements, after trim off the right part of the red color section of the logo. It become about 520 x 90 px.
And below seems with better results for the vertical align. And with a little bit less of side effect while the width change.

#taglineWrapper {
	height: 90px;
}
	
#tagline {
	color: white;
	font-size: 2em;
	text-align: center;
	background: #F06A26;
	padding: 35px 0;
	}