DD Color Tabs Phantom Space

[cstricklen]

DD Color Tabs
http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs/

Can someone tell me what I did to cause this problem? I added a little top and left margin to move the link bar away from the edge of the div it's in, but I get bottom margin, too. I tried padding, but I get the same result--can't move it down and right without creating space at the bottom.

I really want the line snug up against the bottom of the tabs.

Sorry, the site isn't on a server yet, so I can't post a link.

Here is the ccs:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#ddcolortabs {
margin-left: 4px;
padding: 0;
width: 100%;
background: red;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-weight: normal;
font-size: small;
margin-top: 0px;
margin-left: 0px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 0px;
list-style: none;
}

#ddcolortabs li {
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: lowercase;
}

#ddcolortabs a {
float:left;
color: white;
background: #005500 url(images/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span {
float: left;
display: block;
background: transparent url(images/color_tabs_right.gif) no-repeat right top;
padding: 4px 9px 2px 6px;
}

#ddcolortabs a span {
float: none;
}


#ddcolortabs a: hover {
background-color: #007000;
}

#ddcolortabs a: hover span {
background-color: #007000;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #007000;
}

#ddcolortabsline {
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #fff;
border-top: 1.5px solid #998659; /*Remove this to remove border between bar and tabs*/
}

#container {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px; /*set to a negative number 1/2 of your height*/
margin-left: -300px; /*set to a negative number 1/2 of your width*/
border-top: 4px solid #706141;
border-right: 3px solid #ddd5be;
border-bottom: 3px solid #ddd5be;
border-left: 4px solid #706141;
background-color: #fff;
}

#elegantbox {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 130px;
margin-top: -65px; /*set to a negative number 1/2 of your height*/
margin-left: -125px; /*set to a negative number 1/2 of your width*/
border-top: 4px solid #706141;
border-right: 3px solid #ddd5be;
border-bottom: 3px solid #ddd5be;
border-left: 4px solid #706141;
background-color: #005500;
}

.notes {
background-color: #e3e3e3;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 2px;
}

</style>

[ddadmin]

Did you try removing the line:


border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/

inside the CSS per the comments?

[cstricklen]

I appreciate the response, but I don't want to remove that border. I just want it to behave like a good little border. The problem is the space between the border and the tabs above it. The border is snug up against the tabs until I add margin or padding above and left of the tabs; then I get space *below* the tabs, too. It's fine when it's not in a container, but I need it to be in there (but away from the edge). I may need to upload it so you can see what I'm talking about.

[ddadmin]

Hi cstricklen:
Actually, removing border-top: 1px solid #fff; from the CSS doesn't remove the border, just the spacing between the border and the tabs above it. Perhaps I'm not understanding it correctly, if so, please post a link to your problem page.

[cstricklen]

Actually, removing border-top: 1px solid #fff; from the CSS doesn't remove the border, just the spacing between the border and the tabs above it.

Thanks. I know what you mean, but it's not technically correct. In the DD example color scheme, the #fff border is the same color as the background, giving the appearance of space between the tabs and the colored bar, but it's really a border, and it really does get removed per the comment.

In my layout, the bar is the same color as the background and the border is a dark color to give the appearance of a thin horizontal rule and no bar at all.

But your response started me thinking in the right direction: My problem was that I was adding padding between the border and the bar--asking for exactly what I got! When I tried margin instead, which should have worked, IE placed the margin inside the border, causing the same unwanted result. Of course, other browsers don't do it that way, which explains why it looked okay in Mozilla. I guess that should have tipped me off earlier. (Would have tipped you off, too, if I had remembered to tell you it looked okay in Mozilla.)

So, adding padding to the container, rather than to the bar, fixed the problem. Yeah, I know this IE box-model problem is well-documented but I'm a CSS newbie and my brain wasn't working real well.

Anyway, thanks for your help. And thanks for the menu. It looks very nice and it works perfectly.

[ddadmin]

Cool, glad you got it to work in the end.