Log in

View Full Version : Space in IE with dd color tabs


orionvortex
04-12-2007, 11:32 AM
I am using the tabs at http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/ at my page http://chibabeat.com/test_site/page/17397
The tabs look fine in firefox but in internet explorer 7 there is a space between the tabs and the content box. I have tried fooling around with padding and margins but whenever I am able to make it render properly in IE 7 it no longer renders properly in firefox.

The css i am using for the buttons is


.shadetabs{
margin-left: 4px;
padding: 0;
width: 550px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
padding-bottom: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}

.shadetabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}

.shadetabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}
#maintab ul, #maintab li, #maintab ul a, #maintab li a{
text-decoration:none;
}


.shadetabs a{
float:left;
color: white;
background: #0A5B96 url(http://chibabeat.com/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}

.shadetabs a span{
float:left;
display:block;
background: transparent url(http://chibabeat.com/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}
.shadetabs a span{
float:none;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}


.shadetabs a:hover{
background-color: #3E88BD;
}

.shadetabs a:hover span{
background-color: #3E88BD;
}

.shadetabs #current a, .shadetabs #current span{ /*currently selected tab*/
background-color: #3E88BD;
}
#ddcolortabsline{
clear: none;
padding: 0;
width: 550px;
height: 0px;
line-height: 8px;
background: #678b3f;
border-top: 0px solid #fff; /*Remove this to remove border between bar and tabs*/
}

.tabcontent{
display:none;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border-width:3px;
border-style:solid;
border-color: #0A5B96;
width: 550px;
margin-bottom: 1em;
padding: 10px;
}

Does anyone have any suggestions for this problem?

Thank you :)
jscheuer1
04-14-2007, 03:53 AM
There is something(s) adding space. It would better to find that and correct it but, this kludge:


<style type="text/css" media="all">@import "/test_site/themes/spreadfirefox/style.css";</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
/* IE min-width trick */
div#wrapper1 {
width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 720 ? "720px" : "auto");
}

<![endif]-->

<!--[if IE]>
<style type="text/css">
#ddcolortabsline {
margin-bottom:-33px;
}
</style>
<![endif]-->

</head>
<body >

takes care of the problem.