can you post a test page with the code you posted above?
On Aug 10, 9:00 am, maffo <a...@thisisrealart.com> wrote: > Note: I have also posted this on jqueryhelp.com but I havent resolved > this issue. > > http://www.jqueryhelp.com/viewtopic.php?p=9713 > > I have just started a new job and am building my first website for > them. Im using Jquery to try and impress them but after trying and > testing the site in Safari, I am stumped as to why such a basic > function its going wrong. The script works fine in ie and firefox so > Im pulling my hair out. I have stripped all the non necessary code out > of this and placed the css and javascript inside the head. > > -------------------------------------------------------------------------- > CODE > -------------------------------------------------------------------------- > <html> > <head> > > <style type="text/css"> > html { > font-size:16px; > margin:0; > padding:0 > } > body,div,p { > margin:0; > padding:0; > background: #eee; > } > > div#container { > width:70.06em; > height:20em; > overflow: visible; > background:#fff > } > > div#blackContainer { > height:20em; > background:#000 > } > > div#portfolio { > display:none; > width:51.75em; > height:20em; > background:#fc0; > } > > div#blackPanel { > width:51.75em; > height:20em; > background:#000 > } > > div#whitePanel { > padding-left:4.19em; > height:20em; > background:#fff > } > > .panel { > float:left > } > > </style> > > <script type="text/javascript" src="http://ajax.googleapis.com/ > ajax/libs/jquery/1.3/jquery.min.js"></script> > <script> > > $(document).ready(function(){ > // All Jquery fucntions should reside in here > > // NEW FUNCTION SHOW PORTFOLIO TAB > $(".showPortfolio").click(function () { > > $("#container").css({'width' : '103.5em', > 'overflow' : 'hidden'}); > $("#portfolio").show(1000); > }); > > // NEW FUNCTION HIDE PORTFOLIO TAB > $(".hidePortfolio").click(function () { > $("#portfolio").hide(1000, function(){$ > ("#container").css({'width' : '70.06em', 'overflow' : 'visible'});}); > }); > > // End Doc Ready > }); > </script> > > </head> > <body> > <div id="container"> > > <div id="blackContainer" class="panel"> > > <div id="portfolio" class="panel" style=""><a > class="hidePortfolio" href="#">Hide Portfolio Tab</a></div> > <div id="blackPanel" class="panel" style=""><a > class="showPortfolio" href="#">Show Portfolio Tab</a></div> > > </div> > > <!-- WHITE PANEL --> > <div id="whitePanel" class="panel showPages" > style="">White Panel</div> > <!-- END WHITE PANEL--> > > </div> > </body> > </html> > > ------------------------------------------------------------------------ > END CODE > ------------------------------------------------------------------------ > > If you load that code in firefox you will see that by clicking on > 'show porfolio', a yellow div slides open and pushes the black div to > the right. You click 'hide portfolio' and the black div slides back > and the yellow div hides. You can open and close the portfolio div as > often as you like and it works a treat. > > If you try doing the same in safari, it works the first time but then > it starts pushing the black div down. I cant for the life of me think > what it could be and I have spent ages on it. If one of you kind > experts on here could have a quick look at it for me I would more > grateful than you can imagine! > > Thanks in advance, Maffo
