PDA

View Full Version : Drop tab menu in Safari



tonto11
02-07-2008, 05:23 PM
1) Script Title: Drop tab menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.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
02-08-2008, 07:25 AM
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
02-09-2008, 01:39 PM
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
02-10-2008, 09:29 PM
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
04-22-2008, 02:29 PM
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
04-23-2008, 07:32 AM
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
04-23-2008, 12:24 PM
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
04-23-2008, 01:15 PM
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
04-23-2008, 03:43 PM
Awesome, thanks I'll try that out.