IE6/IE7 Sliding Door Issue

[thehuby]

I have an issue trying to create a tab effect (not for a naviagtion -
just for a heading).

http://001.e-connected.com/sectors/

Each of the 'work examples' tabs in IE6 and IE7 shows the line of the
background image of the div below it.

Creating a negative margin on the 'work examples' tab merely slides the
tab further behind the background image above it.

This is however working fine in all other browsers.


CSS (line 1209):
..sectorWorkExa mples{
clear: left;
padding: 5px;
height: 6.75em;
background: url( /interface/pages/sectors/work_examples.g if )
no-repeat top center;
}

..sectorWorkExa mples img{
float: left;
margin-right: 5px;
}

..sectorWorkExa mples div{
margin: 0 0 10px 0;
}

#sectorsHolder h3{
float: left;
font-size: 1.1em;
color: #fff;
padding: 8px 12px 2px 0; /* IE and FF */
margin: 10px 0 -1px 0;
}

#sectorsHolder h3 .h3Left{
padding: 8px 0 2px 12px;
}


Background images are applied using id's for each column eg:
`
#publicSocial h3{
background: url( /interface/pages/sectors/public_social_h 3_right.png )
no-repeat top right #77ae99;
}

#publicSocial h3 .h3Left{
background: url( /interface/pages/sectors/public_social_h 3_left.png )
no-repeat top left;
}

Can anyone shed any light on this?

Regards,

Rick