Getting Unordered List in Front of Image Slide-Show in IE8, IE7 and Probably IE6

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

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!

Clicking on a div placed over an image in IE

Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):

#divInner { /* ... */; font-size: 1000px; color: transparent; }

(Also set "overflow: hidden" I think.)

IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.

a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)

IE8 removing border around some parts of my fieldset. Confused.. Works in ie6 and ie7

Figured it out! Apparently ie8 does not like legends set with display:none. (which was the case). I found an article that basically suggested putting spans inside the legend and putting display: none on it. Problem solved! (the other thing I coulda done was just removed the legends.. but I figured I would keep them there for accessibility.

http://eisabainyo.net/weblog/2009/05/19/fieldset-and-legend-bug-in-ie8/

CSS div overlay unclickable in internet explorer

I had a similar problem and in the end resorted to an IE specific stylesheet and just gave the clickable area a background colour and a:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

Not the prettiest solution, but it works.

To put @Jared Farrish's comment in the answer itself; I added the following code to the head of my html to address only IE using conditional comments:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen"  href="/styles/ie.css" />
<![endif]-->

Float text over image within table cell

position:absolute in combination with a z-index should work.

If it is possible in your design, you can also use the image as the background of the table cell and just put the text as its contents.

Edit: Also see this question about a problem I had in only IE with text on top of an image.

openWYSIWYG - dynamic positioning

You're looking for Modal positioning. Here's one solution:

http://jqueryui.com/demos/dialog/#modal-form

Basically, apply the Jquery Dialog to the div that holds your WYSIWYG. Don't forget a submit button.

Just a quick heads up--I went through quite a bit of headache dealing with WYSIWYG editors for client-facing sites a few months back. It seems that clicking the "paste from WORD" button was a very difficult task to figure out. Word-pasted code can wreak havoc on websites, overrunning text fields in the database. I gave it a try on their demo (which also doesn't support webkit based browsers) and the result wasn't pretty. The only two options I found to solve this were to sanitize code on the back end, or to use CKEditor. I chose the latter because it was so easy. Take a look at CK, it's a great piece of free code.

---

Related Topics