Question

I downloaded a jQuery slider from http://basic-slider.com/ and I’ve put it onto my website. It works completely fine, except for when it’s viewed in Internet Explorer 7. I’ve spent the past 3 days looking at this, but can’t for the life in me find a solution. I was having the exact same problem in IE9, but I used the following and fixed it:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

This is what it looks like in every browser but IE7.
http://www.hackathonplymouth.org/normal.png

This is what it looks like in IE7
http://www.hackathonplymouth.org/ie7.png

I did some research and apparently it might have something to do with position: relative; but I’ve completely removed/re-added this position just to test to see if that was the problem; no luck.

This is what it looks like in IE7 (The UL holding the LI’s (Text captions) does not show). It’s asif there’s a css applied to stop the UL’s from showing – but there’s not.

Live preview: http://www.hackathonplymouth.org/slider/
Source code: http://www.hackathonplymouth.org/slider.zip – (Just incase someone would like a closer look)

In terms of code: I’ve had to link the source code as the jQuery has a fair few lines of code.

Has anyone else come across this when using a slider/jQuery within IE7?

Any input is greatly appreciated.

Answer 1

I was able to get it working by adding left: 0; to the bjqs-caption class. The text was just way off to the right because nothing it telling it where to position left and right, only bottom.