Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow (v2.4) position:absolute, overflow:auto issue

  1. #1
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4) position:absolute, overflow:auto issue

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: Hi, I am having an issue with the slideshow, but I think only in IE7. The div that the gallery is in is set to scroll overflow:auto, and the slideshow jumps when I scroll. here is a link to the page:
    http://www.bellami-designboutique.com/hms/about.html
    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no style property or attribute scroll that would apply here, so I'm curious what you mean. Do you mean overflow:auto? And here the slideshow doesn't jump, it stays stationary while the content around it scrolls. Is that also what you mean? Anyways, there are a number of non-fatal errors with the page visa vis its markup and styles as regards standards compliance and best practices. None of these appear to directly impact this.

    On a hunch I set the position property of the container div to relative:

    Code:
    		<div class="content" style="position:relative;">
    That took care of the problem I saw. I'm not sure why. The script does set the fadeshow1 div to position:relative, that shouldn't be a factor, usually isn't, but with the overflow:auto involved . . . As I say, I'm just not really sure.

    Note: If this is just an issue on this page and similar ones where class="content" is used only once and for this sort of thing, the style can probably be added to the hms-style.css stylesheet:

    Code:
     . . . v_contact { font-size:13px; float:left; overflow:hidden; clear:both; line-height:15px; text-align:right; width:225px; margin-left:15px; margin-right:20px; min-height:620px; border:none; border-width:1px; border-color:#999999; background-image: url(contact_bkgrd.png); background-repeat:no-repeat;  }
    
    .leftnav_newsevents { font-size:13px; float:left; overflow:hidden; clear:both; line-height:15px; text-align:right; width:225px; margin-left:15px; margin-right:20px; min-height:620px; border:none; border-width:1px; border-color:#999999; background-image: url(news_events_bkgrd.png); background-repeat:no-repeat;  }
    
    .content { position:relative; float:left; text-align:justify; overflow:auto; width:724px; margin-right:15px; margin-left:0px; height:620px; border:none; border-left:solid; border-width:1px; border-color:#999999; }
    
    .quote_home { . . .
    Alternatively, if necessary it can be made IE 7 specific for this or all pages.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    katebellami (11-16-2010)

  4. #3
    Join Date
    Jun 2010
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Thank you

    Hi - thanks so much. This worked, although I also cannot figure out why. And thanks for pointing out the errors. I always check those at the very end, before launch (not till Jan) but most of these I'm not too worried about.
    Thanks again!

Bookmarks

Posting Permissions

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