Hi - I am having a major problem with a header area in a new site for our company. The logo and spotlight sit perfectly in ie7, firefox, opera and safari - but in ie6 the right hand spotlight moves to the bottom of the logo with a big.
This has been driving me crackers for over a week and i just wondered if someone can tell me what is wrong.

The page has been loaded up here
http://www.matrixitcomputers.co.uk/n...-reloaded.html

the relevant html and css are included below.


Thanks in advance


HTML CODE
************************************************** **
<div id="masthead">
<!-- <div class="content">
&lt;insert logo and/or top menu&gt; </div> --> <!-- END of the Content DIV -->
</div><!-- END OF THE MASTHEAD -->
<div id="widespot">
<div id="logo">logo</div>
<div id="spotlight"><img src="img/spot2.jpg" alt="Spotlight" width="775" height="150" /></div>

</div>


<br class="clearfloat" />
<div id="column_wrapper">
******************************************
CSS

body {
font-family:trebuchet ms, myriad, tahoma, verdana;
background:url(img/background.gif) repeat-x;
font-size: 100%;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0;
}
h1 {
font-size: 1.8em;
margin: 0;
}
h2 {
font-size: 1.6em;
margin: 30px 0 0 0;
}
h3 {
font-size: 1.25em;
margin: 30px 0 0 0;
}
h4 {
font-size: 1.1em;
margin: 20px 0 0 0;
}
.nomargintop {margin-top: 0;}
.content p {
margin: 12px 0;
}
.menulist {
margin: 6px 0 12px 0;
padding: 0;
list-style-type: none;
}

/************ TOP STUFF ****************/
#wrapper {
width: 975px;
margin: 0 auto;
background-color:#fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;

}
#wrapper .menulist a, #wrapper .menulist a:visited {
color: #000000;
border-left: 6px solid #FFD940;
padding: 0 0 0 6px;
}
#wrapper .menulist a:hover {
border-color: #000000;
}
/*********** MASTHEAD STUFF ****************/
#masthead {
background:url(img/nav-bg.gif) repeat-x;
color: #999999;
padding: 0px;
margin: 0;
height: 36px; /* may need to change this */
border-bottom: 1px solid #fff;

}
#masthead .content {
padding: 12px;
}
/*********** LOGO AND SPOTLIGHT ****************/

#logo { background:url(img/logo-bg1.gif) no-repeat;
height: 150px;
width: 200px;
position:relative;
float:left;

}

#spotlight {
height: 150px;
margin-left: 200px;}






#column_wrapper {
background-image: url(img/backgroud-faux.gif);
background-repeat: repeat-y;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.clearfloat {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}

You can try to set the spotlight image in the css . I mean height, width and background image (just like the logo). Then remove that margin-left and put float:left (just like the logo) . I see there is a div with id="widespot" that shuts the logo and the spotlight. (be sure its width is not less than the sum of theirs). In fact I think your problem is due to the fact that you have set "float" to the logo but to the spotlight image - you haven't. I am not sure though but I will be glad if this info is helpful for you.

You might want to review IE6's bugs here: www.positioniseverything.net
If you narrow the image or div by 3px, it sits where you want it. IE chokes on really tight layouts.

I DO think that floating #spotlight will do the trick.

Thanks for that guys - I have "sucessfuly" implemented it -the only thing is that now i seem to have a white border appear under the floated elements.
Just anotherquick question - was i right to include a <br class"clearfloat /> under them?
You can see what i mean on : http://www.matrixitcomputers.co.uk/n...-reloaded.html

Many thanks once again.

Yes, you do need to clear the floats. I always make sure I define a 0 line height on the <br> though, like this:

.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

thats fine now thanks a lot for your help

You're welcome