Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6?

Well there's your problem! Div id="slideshow"> Links LI And you will see that all of the links are aligning to the center and they are going on separate lines. So this points to a positioning problem within IE Now to figure out how to fix this.

This is fixed now by simply adding a width to the container #image_bar UL. Links The width needs to be 962 just like your max width. This will then make them links line up properly instead of on separate lines Now there is the problem of making them appear on top of the image in IE.

I turned all of the links black so that I was able to see them and that made them come to the top and be click able. At this time, I'm not certain why they wouldn't be showing without that. But I hope that gives you a good start and I'll keep messing with it edit Add "zoom: normal;" to "#image_bar .

Links A" and that will completely fix it. Edit Just tested it to make sure that conditional css isn't needed, it still displays properly in all browsers with those fixes editOkay, so I tried my above fixes one more time and for some reason they didn't go through now. So I went and tried another idea I had.

Here we go image_bar UL. Links Add width: 962px; #image_bar . Links A Add background-color: #E8E6D7; -ms-filter: "progid:DXImageTransform.Microsoft.

Alpha(Opacity=0)";filter: alpha(opacity=0) I am not sure why it is necessary to have the background-color in IE but for some reason it, unlike z-index, is bringing the links to the front, then since they currently have pictures on them I change the background-color to that of your page so it blends in. I then follow that with your opacity from before that way you can actually see the other images I hope this works for you, I tried it 2 times including restarting a visual CSS editor to make sure that it works and that it wasn't just fooling me like the other time Sorry for the answer being longer, it was all part of the thinking process. Enjoy!

Well there's your problem! IEs Javascript interpreter is very finicky and when you are manipulating an object as you are now, it generally lashes out. This would be one of those time.

I would guess that the problem is that you are changing the object so it considers that to have precedence. Personally I would just simply change your code as follows (pseduocode) for the architecture. All you have to do from here is simply either set a class/id name for each of the images so they can be easily changed out in Javascript (this would be my ideal solution) Hope this helps, edit After taking a closer look at your site heres a few problems I found: CSS: Line 336: margin: 0px 0px 18px;; It doesn't effect this, but something to fix.

Now, breaking down some of your CSS the problem with IE is that it is for some reason not allowing a link to be used on the . Active class for some reason. If you want to see what I am describing, simply take float: left; off of #image_bar .

Links LI And you will see that all of the links are aligning to the center and they are going on separate lines. So this points to a positioning problem within IE. Now to figure out how to fix this.

This is fixed now by simply adding a width to the container #image_bar UL. Links The width needs to be 962 just like your max width. This will then make them links line up properly instead of on separate lines.

Now there is the problem of making them appear on top of the image in IE. I turned all of the links black so that I was able to see them and that made them come to the top and be click able. At this time, I'm not certain why they wouldn't be showing without that.

But I hope that gives you a good start and I'll keep messing with it. Edit Add "zoom: normal;" to "#image_bar . Links A" and that will completely fix it.

Edit Just tested it to make sure that conditional css isn't needed, it still displays properly in all browsers with those fixes. EditOkay, so I tried my above fixes one more time and for some reason they didn't go through now. So I went and tried another idea I had.

Here we go. #image_bar UL. Links Add width: 962px; #image_bar .

Links A Add background-color: #E8E6D7; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=0)";filter: alpha(opacity=0); I am not sure why it is necessary to have the background-color in IE but for some reason it, unlike z-index, is bringing the links to the front, then since they currently have pictures on them I change the background-color to that of your page so it blends in. I then follow that with your opacity from before that way you can actually see the other images.

I hope this works for you, I tried it 2 times including restarting a visual CSS editor to make sure that it works and that it wasn't just fooling me like the other time. Sorry for the answer being longer, it was all part of the thinking process. Enjoy!

1 Thanks for your comment, but if you look at the code, you will see that there are 5 clickable areas in each image: It´s not that a different image should click to a different url, it´s that each image has 5 areas to 5 different urls (that the number of images and the number of areas both are 5 is a coincidence...). – jeroen Jan 30 '10 at 20:49 I´ve tried everything you did, but I´m not seeing the same results. I´m going to edit my question to show what I did find.

– jeroen Jan 30 '10 at 22:21 Brilliant! I see the width was just for IE6, it works without it in 7 and 8. This is one crazy IE bug (until version 8!) I haven´t encountered before.

Many thanks! – jeroen Jan 31 '10 at 18:16 1 No problem. Once the first thing wasn't working I was determined to get it working properly.

This way if I have a similar problem or someone in the community then it will be worth the time. – David Jan 31 '10 at 20:56.

I have tried lowering it to 99 and then 11, but nothing. You think IE cannot count to 9999 :-) – jeroen Jan 28 '10 at 16:13 By the way, I´ve added a link to the page in question. – jeroen Jan 28 '10 at 16:14.

The javascript might be overriding your CSS and giving the slideshow images a higher z-index. Try #slideshow li {z-index: 8! Important;} using!

Important overrides any other CSS rule specified elsewhere. Hope this helps.

Thanks, but the javascript is just animating opacity and adding / removing the classes mentioned in the question. – jeroen Jan 29 '10 at 16:44.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.