Nivo Slider in IE6

HTML & CSS
1

I’m using Nivo Slider on the homepage of a new website for a company. The slider works absolutely fine foor all browsers but IE6. And while I know IE6 is not officially supported by the guy behind Nivo Slider, I still need this to work because it’s the only slider I’ve found that offers what I need.

During my usual trouble shooting run (which consists of adding borders to stuff to see what’s happening and where), I noticed the following when applying the border to the styling of the slides, which makes me think that this is a CSS problem rather than anything else.

I’d copy paste the code and screenshots, but this website is still under construction and can not yet be shown to the public, so I’ll try my best to give enough info without leaking anything.

This is what I see the moment the site loads, this is the first slide, the red lines are the slides determined by Nivo.

This is what happens when the second slide loads. Notice that the many vertical slides have turned into one thin horizontal slide at the top of the slider, thus not completely covering the first slide. At this point, every next slide (also the first one when the looping starts) appears that way. When the animation starts to go to the next slide, the current (well previous) image expands and is fully vissible while the next slide loads as a small bar on top.

Another thing I noticed is that when I move my mouse to the border of any div that overlaps or borders the slider, the image appears completely as well.

Styling of the slices:

.nivo-slice {
	position:absolute;
	z-index:80;
	height:100%;
	border: 1px solid red;
}
2

Hi,

Unfortunately there’s not really enough there to tell whether its a css problem or indeed whether it’s been built on JS without supporting Ie6.

If it’s online you can send me the link privately and I’ll take a quick look.

3

I actually figured out what the problem was moments before I left work, one has to spend an entire day to try and figure it out, as well as try different sliders just to find out that “position: relative” and “float: left;” need to go in that piece of CSS there :<

Sorry for wasting your time :frowning: Thanks for the help though!

4

Glad you sorted it out anyway and yes these things can be a real pain sometimes.:slight_smile: