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

Question

I have a simple (absolutely positioned) image slide-show that consists of a few images that rotate every few seconds.

To have different areas of the changing image click-able, I also have an unordered list containing the different links, relatively positioned in order to use z-index.

This works just fine in Firefox (3.6), Safari (windows) and Chrome (windows). However, the links seem to disappear behind the images in IE8 and IE7 (I haven′t even tried it in IE6 yet...).

How can I bring the unordered list to the front in IE? (see code below)

Edit: Link to working page

Edit 2: What I did find using the developers tools of IE8, is that the links work and are on top of the slide-show when I remove:

.links a { display: block; }

The result of removing display:block is that I have 5 tiny click-able areas overlaying the image in the upper left corner. As soon as I add it again there is no click-able area anywhere on the image although the developers tools show the squares where the links should be at the correct locations.

The code (I haven′t included the javascript as it only animates opacity and adds / removes the below mentioned classes):

html

<div id="slideshow">
  <ul>
    <li><img src="/images/header01.jpg" alt="some_image" /></li>
    <li><img src="/images/header02.jpg" alt="some_image" /></li>
    <li><img src="/images/header03.jpg" alt="some_image" /></li>
  </ul>
</div>
<ul class="links">
  <li><a href="link1.html">&nbsp;</a></li>
  <li><a href="link2.html">&nbsp;</a></li>
  <li><a href="link3.html">&nbsp;</a></li>
  <li><a href="link4.html">&nbsp;</a></li>
  <li><a href="link5.html">&nbsp;</a></li>
</ul>

css

ul.links {
  z-index: 9999;
  position: relative;
}
.links li {
  float: left;
}
.links a {
  display: block;
  width: 192px;
  height: 210px;
}
#slideshow {
  position: absolute;
  left: 0;
  top: 0;
}
#slideshow li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
  border: none;
  /* ie bugs */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#slideshow li.active {
  z-index: 10;
  opacity: 1.0;
}
#slideshow li.last-active {
  z-index: 9;
}

Answer 1

Well there's your problem!

<div id="slideshow">
<ul>
<li><img src="/images/header01.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header02.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header03.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header04.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
<li><img src="/images/header05.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li>
</ul>
</div>

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.

<div>
<ul>
<li><a><img /></a></li>
<li><a><img /></a></li>
</ul>
</div>

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.

[edit]Okay, 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!