Override "position: absolute" from inline CSS - alters slide transition effects

I have nothing to do with that unfortunately. The jquery cycle module adds the absolute positioning. The only css I add is some display: none; I know some people have problems with that, but for the most part they have been able to get around it.

If there is a way I can help you I'll be happy to. I don't want to make you sad Jen. You seem like a nice person. ;)

CSS solution
You can try to use the CSS "!important" property to override the inline style.

jQuery solution
You can change "position: absolute" to "position: relative" using some small jquery code.
Something like this may help:

$(document).ready(function() {
  $(".views_slideshow_thumbnailhover_slide").css("position","relative");
});

Add this code to a file like "mycode.js".
Put this file into your theme directory.
Open "yourthemename.info" file and add the following line below "regions[.......]" :

  scripts[] = mycode.js

first solution doesn't work in ie6
second solution will not work if you have javascript disabled.

Since jquery cycle module adds the absolute positioning, and we can't change it, i suggest to rename this issue.

Maybe i am wrong, but it seems to me that the priority can be set to "normal".

The problem has appeared because of compatibility between old version and the new version of the module. Here is an interesting article "http://buytaert.net/backward-compatibility"

The new features of the module a cool. So, we have some problems with the compatibility but we receive a great SlideShow module instead.

I mark it as fixed because in order to run Views Slideshow, the javascript has to be enabled.
If javascript is enabled then the Jquery solution (from message 2) will work.

Reactivate this issue if needed.

jquery solution may not work because I believe jquery cycle adds the absolute positioning on every rotation. The !important may do it.

Regarding the jQuery solution.
Just now, I did all steps from #2.
Cleared cache.

Click on the first thumbnail - firebug shows "position:relative"
Click on the second thumnail - firebug shows relative position too.
Click once again on the first thumbnail - firebug shows relative position too.

So, i can confirm that jQuery solution works.

Awesome thanks intyms

hehe, glad to help.
Also great thanks to you for maintaining this awesome module :)

.css_selector {
position:static !important;
}

DON'T bother with a jquery solution and DON'T use "relative". Relative will still use the css attributes like "top" or "left" or whatever. Since "absolute" and "relative" elements have to be inside another "absolute" or "relative" positioned element or it will reference the greater "body" element it will still jack up your positioning regardless.

"Static" is the default position property for dom elements, so you normally don't have to specify it. Use the "!important" attribute so it overrides the element property. Now it will float in the page however it naturally would. You can use float: or whatever to get it to display in your page where you want it.

Thanks for this - as suggested I added

   .views_slideshow_singleframe_slide {
     position: relative !important;
    }

which corrected the slideshow positioning (previously over and under content and menus), however it appears to have affected the slide transition: instead of 'fade' the new slide opens below the current slide before gliding into position.

Anyone have any ideas on this?

As recommended in 11 try static

Hi redndahead,

Thanks for responding and apologies - I pasted the wrong css. Mine reads as follows:

.views_slideshow_singleframe_slide {
  text-align: center;
  width: 100% !important;
  position: static !important;
}

This approach still alters the transition effects (new slide opens below current). As a workaround I've set transition effects to 'none' (in conjunction with the above css this corrects the position issue - but transitions are a little jarring)

I am reading this post because of a similar issue as #14. I had the slideshow working fine in all browsers except IE 8 and below - in Windows XP. On Windows 7, it's not a problem!

I had the problem of the slideshow images vanishing, until I overode the inline styles on positioning. position: static !important;

Now it works in all browsers, on both Windows XP and Windows 7. But I have the problem described in #14, "This approach still alters the transition effects (new slide opens below current).".

I'll keep looking for a solution, just a shot in the dark here in case someone has any advice. Thanks.

(edit: I just set the 'timing' between transitions to 0, and now the shift isn't noticeable.)

The best solution I have found for this so far is to enable the advanced options and add the "after" option with the following value:

  $('.views_slideshow_cycle_slide:visible').css('position', 'relative', 'important');
  $('.views_slideshow_cycle_slide').not(':visible').css('position', 'absolute', 'important');

This works better than everything I have tried but in some cases when I change slides a lot really fast I can get the slide to jump to the wrong place very briefly before jumping back to the right place.

Also, if you have a responsive slideshow and it has been resized so that the slide is now shorter, it expands to full height while transitioning.

So it isn't a great solution for everyone but it is worth trying depending on your use case.

I'm beginning to thing that jquery cycle just isn't a viable solution if you want responsive.

#16 works on after the first transition. The first slide still renders with the position:absolute value set.
Anyway to get #16 effect to also kick in on the first slide when the page loads?

Not sure off the top of my head. I have abandoned the jquery cycle plugin as it is never going to be responsive.

I am now trying out Ben Young's sandbox for a views slideshow plugin using the jquery cycle2 plugin - http://drupal.org/sandbox/BenYoung/1832338

The views slideshow issue for that is #1801332: Support Malsup's Cycle2 Plugin and I think is the only way we are going to get a responsive cycle.