Slider Gallery Inline List CSS

The jQuery Slider Gallery by jqueryfordesigns.com is a great bit of jQuery that I used recently but it did come with some problems for me, mainly it seemed like you could only have scrolling items within a inline list, I found a solution.

Now i’m no jQuery expert and will probably never claim to be, I do find jQuery to be an excellent tool and there are some great scripts out there including the aforementioned, but I came across a problem and looking at the comments on their demo page, a few others have too.

The problem is that the demo shows images in a list and has the CSS styling of:

.sliderGallery ul li {
   display: inline;
}

It seemed like no matter what else you added to the li the entire script went into meltdown, this was mainly because the script needs the list elements to be inline so no widths needed to be stated which, is great when all your images needed to be different widths like mine did but, I needed to change it as the spec for the project I was working on required text to go alongside those images, and that text needed to be below the images.

I realised that using the following CSS:

.sliderGallery ul li {
   display: inline-block;
}

Got the scroller working how I wanted it in Safari 4, and now my para was appearing below the image as required. The problem for here on was getting it to work for everything else; with firefox not liking inline-block at all and me having to get this whole thing working in IE6 – gulp – I thought i’d never get it to work.

However, once I started thinking about how to get inline-block working in the most popular browsers, I quickly found a solution that works in, IE6, IE7, IE8, Firefox and Safari:

.sliderGallery ul li {
   display: -moz-inline-stack; /* Firefox - Needs to come first */
   display: inline-block;
   *display: inline; /* For IE */
   zoom: 1; /* Magic zoom for IE6 */
}

It took me a fair long while to get this figured out but now it works fine for me on my project and thought it might help others who don’t seem to be getting an answer from the creators.