Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Animated Div positioning problem with IE6/7/8 and Safari

    I integrated 'Animated Collapsible Divs" into a site I'm designing:

    http://www.dynamicdrive.com/dynamici...edcollapse.htm

    Which is here:

    http://s88785257.onlinehome.us/

    This site appears as it should in Firefox 3.6 and Chrome. Every other browser has problems, particularly Safari.

    Safari:
    - http://s88785257.onlinehome.us/schedule.shtml The two location links are completely outside of the Content div and way off the right. The page is effectively unusable.

    If you add any text at all above the location links, they appear in the right place (though moved down a line to accommodate the text). On any page with higher content, the same location code is positioned properly.

    IE6:
    - Clips the top of the text header on the slide-down divs
    - Moves the location links here (http://s88785257.onlinehome.us/schedule.shtml) to the bottom of the page (?)
    - Space between top header graphic and the rest of the page

    IE7:
    - Clips the top of the text header on the slide-down divs

    IE8:
    - Doesn't clip, but font rendering problem while the animated div is sliding down

    I'm most concerned about Safari and the IE clipping problems. Any idea where I've gone wrong?

    To stop Google from indexing this post for the wrong reasons, please don't use identifying words from the site if you respond. Thanks!

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I suspect that your problem is more CSS-related than anything specific to the JS - I might be wrong - but I would say that that Dynamic Drive script seems, to me, an unnecessary and overly-complicated wrapper for jQuery's slideToggle() function.

    You could achieve the same effect with:

    Code:
    $(document).ready(function() {
    	$('#whatever_ID_you give_your_link').click(function() {
    		$('#berkmar').slideToggle('fast', function() {
    			// Animation complete.
    		});
    	});
    });
    and lose every bit of JS from the rest of that page, inclusing those inline event handlers, leaving just:

    <script type="text/javascript" src="jquery.min.js"></script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •