Solved

Overflow hidden/visible Safari problem

Posted on 2008-06-26
7
2,906 Views
Last Modified: 2013-11-19
I am using overflow:hidden to show and hide some content in a div. This works fine in IE6, IE7 and FF BUT in Safari it doesn't seem to work?

If I use inline CSS to test each state, both overflow:hidden and overflow:visible it works fine but when I try and do that dynamically with JavaScript it fails to work?

Any ideas would be great!?!

Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Overflow hidden</title>
 
<style type="text/css">
#special{width:900px; height:200px; background-color:#FFFFFF; border:1px dashed #999999;}
#special img{float:right; margin:10px 10px 20px; border:1px solid #666666; display:inline}
#show-all{width:900px;position:absolute;bottom:0;z-index:99;background-color: #F8F8F8;opacity: .5;filter: alpha(opacity=50);height:10px;}
#show-all2{width:900px;background-color: #CCCCCC;}
#show-all2 a{display:block; padding:2px; background-color:#0000FF; float:right;color:#FFFFFF;display:inline}
</style>
 
<script type="text/javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.overflow == "hidden"){
obj.style.overflow = "visible";
obj.style.height = "auto";
} else {
obj.style.overflow = "hidden";
obj.style.height = "200px";
}
}
}
</script>
 
</head>
 
<body>
 
<div id="special" style="overflow:hidden;">
<div id="show-all">&nbsp;</div>
<div id="show-all2"><a href="#" onclick="showhide('special'); return(false);">Show all</a><br style="clear:right" /></div>
<div style="padding:10px;">
<img src="images/service.jpg" alt="" /><br /><br />
<h1>Atom Bomb</h1>
<p>Aftermath of an atomic bomb explosion - The aftermath of an atom bomb dropped on Japan by the United States in 1945. <br />Category: Social Studies - America History<br />Film Name: The Fragile Balance<br />Key Words: atom bomb, World War II, Hiroshima, Nagasaki<br /></p>
<p>Copyrighted Material, AIMS Multimedia. </p>
<br />
</div>
<br />
<br style="clear:both" />
</div>
 
</body>
</html>

Open in new window

0
Comment
Question by:Eternal_Student
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21882045
http://www.quirksmode.org/css/overflow.html

Safari cannot dynamically change overflow to auto or scroll. Bug solved in Safari 3.0b Windows.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 21882092
Here
<script type="text/javascript">
var shown=true;
function showhide(id){
var obj=document.getElementById(id);
obj.style.overflow = (shown)?"hidden":"visible";
obj.style.height   = (shown)?"200px":"auto";
shown=!shown;
}
</script>

Open in new window

0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21897576
There is no fix for Safari then?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21897644
I just gave it to you.
The script I gave you should work on all browsers on all platforms
If you need it to save the state while navigating away and back, we need to add some code to the onLoad but otherwise it should work
Try it.
Michel
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21899268
I just tested on IE and FF and you need to click the link a couple of times before it works. I had this problem before but im not sure how I solved it now?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21899415
Change shown=true to shown=false
My mistake
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 21899606
Works like a treat, thank you.
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

626 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