I have my pager displaying below my slideshow. In Google Chrome 5.0.375.55 (current stable release), any links directly below the pager area can not be clicked. It's as if the content is being covered but is still viewable. I played around with looking at the DIVs and the z-index settings to see if a content area is blocking the content underneath but I didn't have any luck in finding the cause of that. It works fine in IE 7 and FF 3.6.3. I've tweaked some of the CSS related to the slideshow and pager but nothing that should be causing a problem outside of the content area where the slideshow and pager are displayed. The site is here:

http://waterford.lib.mi.us/

CommentFileSizeAuthor
#11 811044-test-browsers.pdf393.53 KBintyms

Comments

redndahead’s picture

redndahead commented

Something is making it calculate a height of 1180 or something pixels for each slide. That is huge and it is what is probably causing your issue. Somehow you need to be able to get that slideshow height down to a correct height. Maybe adding height: 400 to the advanced settings or whatever the height should be.

aimutch’s picture

aimutch commented

Where are you seeing the 1180 height amount? I didn't see it in Firebug. I did play around with the height in the CSS.

I also try changing the height to 250 in the advanced setting after you suggested that. Still no-go.

aimutch’s picture

aimutch commented

I also tried this:

.views_slideshow_singleframe_slide {
height: 250px;
}

in my local.css file. Which kind of work for Chrome. But caused problems for IE 7.

redndahead’s picture

redndahead commented
Status: Active » Postponed (maintainer needs more info)

Can you apply the patch here #777990: Advanced settings not workin and then try the height: 300 in advanced settings again.

aimutch’s picture

aimutch commented

Will do and will report back if that fixes the problem.

aimutch’s picture

aimutch commented

That still didn't work for me. To confirm that I'm setting this correctly, I went here:

http://waterford.lib.mi.us/admin/build/views/nojs/display/Slideshow/defa...

and then under advanced options added this text:

height: 250

and saved the changes. Did I miss anything?

redndahead’s picture

redndahead commented
Status: Postponed (maintainer needs more info) » Active

That should have worked. I'll need to look at this again. Sorry I missed your reply.

intyms’s picture

intyms commented
Status: Active » Fixed

This problem is mentioned here too:
http://drupal.org/node/825450#comment-3082612

This code may help. Add it to your css file:

.view-Slideshow .view-content {
  position:relative;
} /* you can also delete this, i added it just to show that an absolute positioned div has to be included in a relative positioned div.  */

.view-Slideshow .views-slideshow-controls-bottom {
  position:absolute;
  z-index:100;
}
aimutch’s picture

aimutch commented

I tried this. The absolute does seem to help a bit in Google Chrome but it still didn't work as it does in IE and FF. When I tried applying it to other elements, it did work in Google Chrome but blew up the layout in IE and FF.

intyms’s picture

intyms commented
Status: Fixed » Active

#9 aimutch
I will look at it in the nearest days. Hope to do it tomorrow.

intyms’s picture

intyms commented
Status: Active » Fixed
StatusFileSize
new 811044-test-browsers.pdf393.53 KB

#9 aimutch

Loading time of your webpage
Your website loads very slow.
In IE, your css is not loading from the first attempt.
So that's why i think, sometimes you see a totally broken design.
Try reloading the page several times.
Also contact the hosting company and ask them for help.

Firefox / Chrome / IE 8
See attached pdf file (3pages).
You will see there that the webpages looks almost ok in Firefox, Chrome and IE.
I see only one problem in IE.
The container (containing pagers) is too small. That's why the top and bottom borders of the pagers aren't displayed.
Here's the CSS fix:

.views_slideshow_singleframe_pager {
  display: block;
  height: 24px; /*in the attached pdf file the semicolon is missing*/
  padding: 5px 0 4px 0; 
} /*adjusting the height of the container to match the height of pagers*/

If the design is still broken, attach to your message a screenshot, let me know your browser version and reopen (mark as active) this issue.

Good luck.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.