| thehuby 2007-01-27, 11:02 pm |
| 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):
..sectorWorkExamples{
clear: left;
padding: 5px;
height: 6.75em;
background: url( /interface/pages/sectors/work_examples.gif )
no-repeat top center;
}
..sectorWorkExamples img{
float: left;
margin-right: 5px;
}
..sectorWorkExamples 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_h3_right.png )
no-repeat top right #77ae99;
}
#publicSocial h3 .h3Left{
background: url( /interface/pages/sectors/public_social_h3_left.png )
no-repeat top left;
}
Can anyone shed any light on this?
Regards,
Rick
|