PDA

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!