DD Tab Menu customization help

[roystik]

Can anyone tell me how to customize the DD Tab Menu found here (specifically example 4) to do the following:

1. Change the height of the tab to 22px
2. Vertically align the text to the middle

I tried adding "height:22px;" to the following section

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 3px 7px;
}

and it works fine on Firefox but on IE it's the WIDTH that expands for some weird reason. Can someone more knowledgeable in CSS help me out here?

Thanks!

[Veronica]

That IE thing is... odd.You should be able to get the same effect, however, by just changing the top and bottom padding, for example setting the top and bottom to both equal 6 (which would also vertically align the content in the center):

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 6px 7px;
}

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[roystik]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

I did put in a link in my post. It's not in the same proper format, but it's still there.

[roystik]

That IE thing is... odd.You should be able to get the same effect, however, by just changing the top and bottom padding, for example setting the top and bottom to both equal 6 (which would also vertically align the content in the center):

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 6px 7px;
}

Thanks for the reply. But would your suggestion work as well if there were two lines of text in the tab? I'm going to have to test that out.

[Veronica]

But would your suggestion work as well if there were two lines of text in the tab?

No. If you want some of the tabs to have 2 lines, and some to have one, first you would need a height bigger than 22px to accomodate them at the current font size. So let's make the height of the tabs 28 px.

You would put the height of 0 in the "ddcolortabs a" and set the top and bottom padding for the "ddcolortabs a span" to 0. This works in both FF and IE.

.ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
height:22px;             /* height here*/
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 0 8px 0 7px;         /* 0 padding here here*/
}

What I've done so far will vertically align the text at the top. If you want everything to be vertically aligned in the middle, you would need to add a separate class for the two line tabs, and then have a different style for one line tabs( with more padding on top and bottom) and two line tabs (with 0 padding on top and bottom).

.ddcolortabs a span.twolines{     /* this whole class is added by me for 2 lines*/
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 0 8px 0 7px;
}
.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 6px 7px;
}

[roystik]

Awesome! Thanks for the code, it really helped. I had to play around with the height and the padding to get it just right, but I finally did it!

Thank you!