Problem with left margin in fadeslideshow 2.6.1

[dclark]

Fadeslideshow 2.6.1
2) Script URL (on DD):

3) Describe problem:
I am having problems with fadeslideshow.js inserting a margin-left:6px on initial load of an image. If I enlarge my screen even slightly the margin-left: goes to 0 and everything looks fine on the slide show. Images show the difference in Margin left for the same slide. For this site we need it to be margin-left:0 always for all screen sizes except a phone where we don't run the slide show.

Website is a work in progress at tipsandbox.net/indexbbc.php

We have not run into the problem when all of the slide shows were width:100% but on this site we are restricting the overall site width to 80% Perhaps that is what our problem comes from.

Thanks for any help.

[jscheuer1]

Margin on images within the display is used by the script for centering when images of multiple dimensions are used, even when they are not, it's set to 0. If you want to set a margin on the show, put a container division around it and set the margin on that.

[dclark]

I assumed you were talking about the div that holds the show..(in our case we named that div "index2show" I put a container div around that with margin set to 0 It had no effect. There is only one image currently in the slide show. so it should not be a multiple dimension image problem. We are centering the whole show in a div with margin:0 auto and setting the width of that container to 80%. The margin occurs... however if we enlarge the screen area even a couple of mm the slide show refresh sets the margin-left to 0. Contrary to what you said about image dimentions since we have only one image loaded...the left-margin is set to something other than 0. For our purposes we want it to 0 no matter what. Is that doable

Thanks for you quick response.
David

[styxlawyer]

I assumed you were talking about the div that holds the show..(in our case we named that div "index2show" I put a container div around that with margin set to 0 It had no effect. There is only one image currently in the slide show. so it should not be a multiple dimension image problem. We are centering the whole show in a div with margin:0 auto and setting the width of that container to 80%. The margin occurs... however if we enlarge the screen area even a couple of mm the slide show refresh sets the margin-left to 0. Contrary to what you said about image dimentions since we have only one image loaded...the left-margin is set to something other than 0. For our purposes we want it to 0 no matter what. Is that doable

Thanks for you quick response.
David

I think John was quite clear that you need an additional <div> container around the one for the slideshow. You can then set the margins on that extra <div> to whatever you want. If you want the left margin of the slideshow itself to always be zero you will have to ensure that the slides are all the same size and the slide show width in the JavaScript instantiation is set to exactly the same width as the slides.

[dclark]

Thanks, I am sure you both are well intentioned..but you are not understanding my messages. We DO have a surrounding <div> set to 0 margin and we currently only have 1 image in the slide show so that it is NOT different image sizes. I will review previous sites that we have done this without this problem to see if I can find the cause. Previously we may have used ver 2.4 with the responsive addition.

Thanks again for you help... If we find the cause...I'll post the fix...

[jscheuer1]

An issue is that you cannot have only one image in a slideshow. If you just want one image, it should just be a single image tag. The entire slideshow concept requires at least 2 different images. If you have only one image and are having problems, either you have the dimensions of the slideshow set in some problematic manner, or the difficulty arises in some other manner from the fact that there is only one image when the script expects at least two.

Forgive me if I missed it, could you state in as simple a way as possible why you would want a slideshow with only one image in it?

Further, even if having just one image isn't the problem, responsive design doesn't mean that things just work out. Sometimes the rest of the page is at issue. Other styles for the page that affect all images might be at issue. if the page has no height set (html and/or body tag) in style, or if the page's actual width is not the intrinsic 100% but something greater or lesser due to styles and/or elements that exceed or constrain that, sometimes it's impossible for this script to react as might be expected.

I'll have a closer look IF after you add another image there's still a problem. I'd also say to experiment with just an image tag. If after eliminating the slideshow, there's still a problem, then it's obviously not the slideshow, but can probably be worked with more easily.

[styxlawyer]

As John wrote the JavaScript instantiation of the slide show must have at least two entries in the image list. If you are currently using the slide show as place holder for future expansion, simply put the same image in twice. I use this trick quite a lot where I want some images to appear for longer than others.