IE showing overflow area

URL: http://www.europc.co.uk/europcdev/home.aspx?ProductDetailID=1&ProductID=5491

I'm creating the rounded background for the sub-menus (purple ones around the sides) with the following css/html:

HTML

<div class="spacer"></div>

<div class="sideObjectHeader">
<div class="sideMenuHeaderLeftDiv"></div>
<div class="sideMenuHeaderRightDiv">
<span id="lblText" runat="server" class="sideMenuHeaderDivText">Text</span>
</div>
</div>

<div class="spacer"></div>


CSS

.sideObjectHeader
{
text-align: left;
font-weight: bolder;
color: #e5e5ea;
vertical-align: baseline;
padding: 0px 0px;
margin: 0px 0px 0px 0px;
height: 18px;
display: block;
}
.sideMenuHeaderLeftDiv
{
background: url(images/css/sideHeaderLeft.gif) no-repeat left top;
height: 18px;
position: relative;
z-index: 150;
width: 7px;
}
.sideMenuHeaderRightDiv
{
background: url(images/css/sideHeaderRight.gif) #444473 no-repeat right top;
height: 18px;
padding: 0px 0px 0px 8px;
position: relative;
top: -18px;
}
.sideMenuHeaderDivText
{
position: relative;
top: 2px;
}


Everything looks okay on FireFox/XP but, in IE/XP, there's an extra bit of whitespace below the sub-title. It looks to me like it's the space left by the moving of the lower div up the way.

I tried setting overflow: hidden but this just resulted in the layout breaking - divs tried to span to 100% for some reason so page gets stretched out horizontally.

Does anyone know of any other way to get rid of the whitespace at the bottom of these?

Thanks,

K

I'm not quite sure what whitespace you're talking about, but I *think* any extra whitespace can be eliminated by not having a carrage return or spaces in your code;


<span id="lblText" runat="server" class="sideMenuHeaderDivText">Text</span>
</div>
</div>

<div class="spacer"></div>


Should be changed like this;


<span id="lblText" runat="server" class="sideMenuHeaderDivText">Text</span></div></div>

<div class="spacer"></div>


Try that in the area where you're having problems with whitespacing. If it's what I'm thinking, it's a 'bug' in IE/XP...

:thumbsup:

I had tried that to fix it but didn't make any difference. Might be just another IE bug to add to the list. :mad:

Any chance you could post an image with an arrow locating the problem area? I'm still not sure what part you're looking at.

I'm sure we can solve this. :thumbsup:

Sorry, it's taken a while to reply - was working on another project there. Here's an image showing the difference between IE and FF on the PC/XP:

http://www.atgl14.dsl.pipex.com/misc/damnIE.JPG

I'm still not having any luck fixing it. Maybe by the time I'm done, IE7 will be out and the world will be a better place :rolleyes: .

Just wondering if anyone had any suggestions for this - still not having any luck with it. :(

is that just on a certain page or all of your pages? because its fine for me, maybe clearing your internet cache could resolve the problem?

Managed to get round it by using some of the IE hacks.

Thanks for the help though!

K