Drop down/ Overlapping Content Shifted too High in Safari

[tgildred]

1) Script Title: Drop down/Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: See the following page: http://gildredesign.com/portfolio/2011/04/back-on-my-feet-boston-brochure/

When viewed in Internet Explorer 8 it positions as expected, but in Safari 5 the subcontent DIV is about 23 px too high (roughly). I'm out of ideas on how to fix it, if anyone can point me in the right direction, I would appreciate it.

Here's the code:


<div class="nav_outer" position: relative; >
<div style="width: 200px; float:left;"><?php echo sharing_display(); ?></div>

<div class="nav_inner">
<?php if (is_single($post) ) { ?><a href="#" class="nav_addlviews" id="searchlink" rel="subcontent">Additional Views</a><?php } ?><span class="nav_prev"><?php previous_posts_link('<em>&laquo;</em> Prev', 0); ?><?php next_post_smart('%link', '<em>&laquo;</em> Prev', TRUE); ?></span><span class="nav_next"><?php next_posts_link('Next <em>&raquo;</em>', 0); ?><?php previous_post_smart('%link', 'Next <em>&raquo;</em>', TRUE); ?></span></span>
</div>
</div>

<?php if (is_single($post) ) { ?>
<div class="nav_addlviews_subcontent" id="subcontent">
<?php get_custom_field_value('Additional Views', true); ?>
</div>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "right-bottom", 300, "click")
</script>
<?php } ?>


And (what should be) the relevant CSS:

.nav_outer { width: 513px; margin-bottom: 5px; clear: both; }
.nav_inner { float: right; margin-top:-10px; margin-bottom: 10px; }
.nav_inner a { font-size: 11px; line-height: 21px; text-decoration: none; color: #666; }
.nav_inner em { font-size: 16px; font-weight: bold; font-style: normal; color: #e5b80d; line-height: 18px; vertical-align: top; padding: 0 5px; }

.nav_prev a { font-size:11px; line-height: 21px; text-decoration:none; color: #666; display: block; float: left; padding: 0; width: 60px; height: 20px; text-align: left; background: url(images/next_post.png) #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #b3b3b3; }

.nav_next a { font-size:11px; line-height: 21px; text-decoration:none; color: #666; display: block; float: left; padding: 0; width: 60px; height: 20px; text-align: right; background: url(images/next_post.png) #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #b3b3b3; }

.nav_addlviews { font-size:11px; line-height: 21px; text-decoration:none; color: #666; display: block; float: left; margin-right: 20px; padding: 0; width: 90px; height: 20px; text-align: center; background: url(images/next_post.png) #fff 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #b3b3b3; }

.nav_addlviews_subcontent { position: absolute; margin: 0; visibility: hidden; background-color: #000; padding: 8px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: url(images/shade.png) repeat; }
.nav_addlviews_subcontent a { display: inline-block; height: 100px; line-height: 100px; vertical-align: middle; padding-left: 8px; padding-right: 3px; border-left: 1px solid #fff; }
.nav_addlviews_subcontent img { line-height: 100px; vertical-align: middle; }
.nav_addlviews_subcontent a:first-child { display: inline-block; height: 100px; line-height: 100px; vertical-align: middle; padding-left: 0; padding-right: 3px; border-left: none; }

Many, many thanks in advance for any help...

[jscheuer1]

Once I'm on the page in Safari, what do I have to do to see the problem?

[tgildred]

Sorry; when you hover over "Additional Views." It should sit just below that button.

[jscheuer1]

I'm using Safari 5.1.1 under Windows 7 and that's exactly how it is. Are you certain that you're not viewing a cached version of the page? Close the page, clear Safari's cache, navigate to the page and then refresh the page to see.

If that doesn't fix it, which exact version of Safari and under what OS are you seeing this in?

[tgildred]

Is there a facepalm emoticon? I was logged into wp-admin and the toolbar along the top edge was causing it to appear misplaced. Sorry to have wasted your time… it was a long day, and clearly I was feeling a little punchy.

[hozefa]

Hi
I am also getting problem with this script in safari, you can see my site bcoskins.com in safari and see top menu "product" button. It working perfect in firefox and IE but having issue in safari browser.

Please help me if anybody have solution for this!
Thanks

[hozefa]

Hi I am getting a special kind of issue, related to only safari browser, any page in safari where a video is provided, this script showing blank content and all in other pages it working perfect

Please help me to find solution for this issue.

Thanks