http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

[Jano]

1) Script Title: Drop down tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I am using tab style #4. Auto resize of tab background to fit font size.

I have most of the finer points sorted now, exept for one.
How do I stop the back ground image of the tab resizing to fit to the size of the font size?
Changing the font size in the css file also resizes the background image to 'fit' the font.
I don't want this to happen as my layout is within a table and I want to have a corresponding image (a tab looking image) in one column to line up with the menu in another column.
I would like that the image I have created for the background tabs, stays put with the font centred in the middle.
test page up at so you can see what I mean. http://www.oloughlin.id.au/test/index2.htm
Thanks
Jan

[jscheuer1]

This may or may not be exactly the answer you're looking for, as the tabs don't actually "resize". That is to say, like many elements on a web page, they simply are the size they are as dictated by the amount of space required by their content. The background doesn't change size, but the area through which the background is seen does.

I suppose that's potentially governed by various things. I instinctively went for the .glowingtabs a span selector's padding (in the menu.css file - highlighted line, changes red):


.glowingtabs a span{
float:left;
display:block;
background:url(images/glowtab.jpg) no-repeat right top;
padding: 6px 14px 4px 5px;
font-weight:bold;
color:#3B3B3B;
}

Those are the top, right, bottom, and left padding values respectively. The above values looked right to me for a 12px Verdana font. If you use a different font, things may change. If you use a different font size, they definitely will.

BTW, the font should have backup:


.glowingtabs{
color:#FFFFFF;
float:left;
width:100%;
font:normal 12px Verdana, arial, sans-serif;
border-bottom: 4px solid #4c6c49;
text-decoration: none;
}

Otherwise, if Verdana is unavailable in a given browser, you likely will get a serif font like Times New Roman, which is not only ugly there, but also has a different size, such that it would throw off the alignment.

[Jano]

Many thanks John
Your solution has fixed my 'problem' and it doesn't look so squashed now as before. Looks infinitely better I would say.
And also for the tips on the font. In the words of Monty Python - Life of Brian "What did the Romans ever do for us?"
cheers
Jan