Drop tab menu in Safari

[tonto11]

1) Script Title: Drop tab menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

3) Describe problem: I noticed that the drop tab menu on my site expands horizontally in Safari so that the last tab appears on another row with the horizontal bar. It looks like the text is larger than other browsers which causes the expansion. I was just wondering if anyone had a work-around? Thanks!

[ddadmin]

What version of Safari are you using, and does the problem occur in the DD demo page as well? It sounds like it could be the way you've customized style of your menu that's causing the problem, but please post a link to the page on your site that contains the problematic script so we can check it out.

[tonto11]

Hi, I was using a site which displays a webpage in different types of browsers. I forgot the name of the site, but I noticed for Safari this problem occurred. My site that I'm using this on is http://www.toledobend.com

What version of Safari are you using, and does the problem occur in the DD demo page as well? It sounds like it could be the way you've customized style of your menu that's causing the problem, but please post a link to the page on your site that contains the problematic script so we can check it out.

[ddadmin]

I see the problem. Inside ddcolortabs.css, remove this line:

letter-spacing: 1px;

Apparently Safari interprets it differently from the other browsers, causing each tab to be longer in that browser.

[tonto11]

Thanks for the reply. Is there another work around to this problem? When I remove the letter-spacing the text appears too cramped. I noticed even Alexa's thumbnail shows the bar carring over to the next row. Thanks.

[ddadmin]

When I remove the letter-spacing the text appears too cramped.

I gather you mean when you remove letter-spacing, the text appears fine in Safari now, but too cramped in other browsers?

[tonto11]

Hi, yes it shows up fine in Safari but the letter-spacing looks cramped in other browsers when I remove that line from ddcolortabs.css. I'm guessing the number of Safari users is small but I'd still like to make it show up better for them without compromising the look in other browsers. Thanks.

[jscheuer1]

You could add this (highlighted) to the head of your page after the style link:

<link rel="stylesheet" type="text/css"  href="http://www.toledobend.com/dropdowntabfiles/ddcolortabs.css" />
<script type="text/javascript">
if(/Apple/.test(navigator.vendor))
document.write('<style type="text/css">.ddcolortabs a {letter-spacing:0;}<\/style>');
</script>

[tonto11]

Awesome, thanks I'll try that out.