I apologize, but this might be a bit hard to get your head around.
First, you need to know that any element that comes later in code has a higher z-index than the element preceding it. That means that later elements will always be on top of the earlier elements. If you do not specifically break out of this.
Giving an element absolute or relative positioning breaks it out of it. As soon as the element is positioned absolutely or relatively, it lies on a higher z-index than all statically (non-) positioned elements.
Now comes the difficult part. Z-index only plays roles among the sibling elements. If you have a container with a z-index 3 and inside that container a picture (z-index 5) and some text (z-index 10), the text will be over the picture. The containers z-index does not play a role. Now you add a different container with a z-index 4 (or even another of the same element with a z-index 3 but one that comes later in the code). This new container will be over the first container, the picture and the text. Because the containers are siblings and the second container has a higher z-index value. However, if I put the second container inside the first one, the second container (z-index 4) will be below picture (z-index 5) and text (z-index 10).
Z-index value applies only to elements with absolute or relative positioning. It is ignored for all statically positioned elements. This is important, because it means all statically positioned elements can be deemed as non-existent when it comes to z-index rules. Forgetting about all the structure but the positioned elements, you have a bunch of sibling anchor elements (<a>) and within those elements image elements. All anchors have the same z-index, which is 1. That means every next anchor is on top of the previous one (the rule of the element that comes later in the code being on top of the earlier element when they have the same z-index specified). Inside the anchors are images with a high z-index (5), but that is irrelevant, because the images are children of anchors and as such cannot compete with the anchor's siblings.
Try to imagine post-it notes. I put a post-it note on a page in a book. I write on it, with a pencil, "Lunch at 11". Later on I take a pen and write 12 over 11. Pen has a higher z-index and I will only see Lunch at 12 now. Then lunch is moved to 12:30 and I use a marker to write that. It appears over both other messages. Later, lunch gets canceled and I take another post-it note and write with a pencil "Lunch canceled". Even though it was pencil that I used, this is the message I see, because the new post-it note is above the previous one.
Returning to your issue, it does not matter how high your image z-index is, because every next anchor is above the previous anchor that holds the image.
And a solution? Get rid of the positioning of the anchors. This will mean only big images are positioned and as such above all other content. Every next big image will be positioned over the previous one, but that won't bother you, since you cannot have two big images open at the same time. And use margins to correct the location of the image.
Code:
.pg li a { margin: 2px 10px; border: 1px solid #CCC; padding: 4px; float: left; display: block; width: 100px; height: 75px; }
.pg li a:hover { font-size: 100%; }
.pg li a img, .pg li a:visited img { border: 0px none; width:100px; height:75px; }
.pg li a:focus img,
.pg li a:hover img,
.pg li a:active img
{ position:absolute; width: 400px; height: 300px; margin-top: 50px; margin-left: -50px; }
And why did it work in all other browsers but IE? Because your code had changed z-index of anchor on hover. This would mean that the hovered anchor is brought forward in z plane and exists above all other anchor siblings. However, IE clearly had no idea how to interpret that and has either:
a) applied higher z-index to all anchors when one was hovered on;
b) ignored change to z-index on hover.
[small]Do something about world cancer today:
Comprehensive cancer control information at PACT[/small]
