View Full Version : Ultimate Fade-in slideshow (v2.4) position:absolute, overflow:auto issue
katebellami
11-16-2010, 04:38 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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!
jscheuer1
11-16-2010, 05:13 PM
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:
<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:
. . . 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.
katebellami
11-16-2010, 07:31 PM
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!
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.