CSS: Overflow hidden causes links to not work in Safari - online example

Posted on 2007-04-06
Medium Priority
Last Modified: 2013-12-07
I am trying to create an animated scrolling list of images.  I use a div set with a small width and style overflow to "hidden".  It contains a larger div that contains the images.  Changing relative positioning of the large div moves the images, and the excess is clipped via the overflow.  It works great in firefox and IE ... see the example :


but in Safari, the overflow that is hidden (and shouldn't exist) causes problems.  It seems to block mouse events of elements that are visible in the same space.  The example demonstrates this - provided you view it using the Safari browser (I'm testing with Version 2.0.4 (419.3)).

Other sites that use the same technique work though.. like http://tv.yahoo.com and http://www.900frames.tv/ (the developer had this problem, and posted his solution - which doesn't help me : http://www.dynamicdrive.com/forums/showthread.php?t=7036 ).

i need help !!!
Question by:suki_babee
LVL 30

Expert Comment

by:Mark Steggles
ID: 18867797
Hello suki_babee,

I havnt got safari so I cant test this. But you know that z-index only works on positioned elements? Just checking you know that



Author Comment

ID: 18868107
Thanks Steggs.  Yeah, I thought that but tried it anyway.  Countless IE problems make you try anything!  :)

So I actually solved the problem.  It turns out I *DO* have the same problem as the www.900frames.tv guy - as he posted.  Except my mistake was the height on the content div "box2" (his was width).  In my original prototype, I had it set to 37 pixels (the same as the images) - but didn't account for padding - so I needed 43 pixels.  It looked ok - and i only focused on checking the width.  I wish I had checked the $%&# height too.  It is very strange behavior.

To anyone searching for a solution to an overflow:hidden issue messing up links on a page in Safari - make sure the div that you position as relative is large enough to hold all the contents.  If not sure, set the width and height to very large values, and test that.  I'll update and leave the example up online for a while for anyone interested.   I wasted a whole day on this.  :(

Accepted Solution

ee_auto earned 0 total points
ID: 24124875
Question PAQ'd, 500 points refunded, and stored in the solution database.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question