Getting an unordered list before image slide show in IE8, IE7, and possibly IE6

Question

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

To have different areas of the changing image available for clicks, I also have an unordered list containing different links, relatively positioned to use the z-index.

This works great 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 ...).

How can I fetch an unordered list in IE in IE? (see code below)

Edit: Link to work page

Edit 2: What I found using the IE8 developer tools is that the links work and are on top of the slide show when deleted:

.links a { display: block; } 

Result of deleting the display: the block is that I have 5 tiny areas with the possibility of clicks overlapping the image in the upper left corner. As soon as I add it again, there is no clickable area anywhere in the image, although the developer tools show the squares where the links should be in the right places.

Code (I did not enable javascript as it only enlivens the opacity and adds / removes the classes below):

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 here is 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 The Javascript interpreter is very thin, and when you manipulate the object as you are now, it usually lashes out. It will be one of those times. I would suggest that the problem is that you are changing the object, so it thinks it takes 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 is just provide the class / id name for each of the images so that they can be easily changed in Javascript (this would be an ideal solution)

Hope this helps,

[edit]

After a closer look at your site, there are several problems that I found: CSS:

 Line 336: margin: 0px 0px 18px;; 

This does not affect it, but something to fix.

Now, destroying some of your CSS, the problem with IE is that for some reason this prevents us from using the link for use in the active class for some reason.

If you want to see what I am describing, just take float: left; off # image_bar.links LI And you will see that all links are centered, and they go on separate lines. Thus, this indicates a positioning problem in IE.

Now to find out how to fix it. This is fixed now by simply adding the width to the #image_bar UL.links container. The width should be 962, as is your maximum width. This will cause the links to be placed correctly, and not on separate lines.

Now the problem arises of making them appear on top of the image in IE. I flipped all the black links so that I could see them, and this made them climb to the top and click with the mouse. At this time, I’m not sure why they won’t show without it. But I hope that this will give you a good start, and I will continue to mess with it.

[edit] Add "zoom: normal;" to "# image_bar.links A" and this will completely fix it. [edit] Just test it to make sure that conditional css is not needed, it still displays correctly in all browsers with these fixes.

[edit] Okay, so I tried again to execute my corrections again, and for some reason they did not go through now. So I went and tried another idea. 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'm not sure why you need a background color in IE, but for some reason it, unlike z-index, brings links to the front, then, since they currently have pictures on them, I change the background -color to the text of your page so that it fits. Then I follow this with your opacity until this way, you can see other images.

I hope this works for you, I tried it 2 times, including restarting the visual CSS editor, to make sure that it works, and that it doesn’t just fool me, like at other times.

Sorry that the answer was longer; all of this was part of the thinking process. Enjoy it!

Answer 2

Can you try to assign #slideshow index z below 9999?

Answer 3

javascript can redefine your CSS and give slide show images of a higher z index.

try

 #slideshow li {z-index: 8 !important;} 

using! important overrides any other CSS rule specified elsewhere.

hope this helps