css image gallery issue with IE 1

[TheCandyman]

I have a simple css image gallery that on hover the image expands and shows on top of the thumbnail image. This works great in all browsers except IE, where it falls behind all of the images. I'm not sure what i'm missing.

http://valleydentalconsulting.com/CASS_Clinic.asp

notice with Firefox, Chrome, etc it shows on top of the other images when you hover. But IE doesn't. Suggestions?

.

 

[BillyRayPreachersSon]

AFAIK, IE does not support the :focus pseudo-class you are using.

It does, however, support an 'active' pseudo-class, so you could double-up your selectors to support both and see if that works for you, e.g.:

#someId .someClass a:focus,
#someId .someClass a:active {
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

Incidentally, I don't think the image was being displayed at all, rather than being displayed behind anything...



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

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.

.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]

 

[TheCandyman]

Vragabond - thanks for the explanation, that does make sense. I used your code and the larger images do show on top, but they show an angle in IE. IE6 or IE8 with compatibility mode really show them at an angel, but FF displays correctly.

http://valleydentalconsulting.com/CASS_Clinic.asp

.

 

[Vragabond]

Add

.pg li { float: left; }

to your CSS. The angling comes from each li beginning a little lower than the one preceding it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[TheCandyman]

Thanks Vragabond,

I should have known the Float:left solution, just got frustrated with this.

 

[TheCandyman]

Vragabond,

i did notice one weird thing in IE6(IE8 in compability mode) the bottom row on images flickers. What causes that? Underlying <br> ??

 

[ck1999]

I noticed on the site that if you have the picture large from hovering then you click on the image and following the link then return using the back button the image stays on the screen unless you click somewhere else on the site or refresh. Even if you hover over another image the image stays there?

any ideas on what is causing this.

Occurs in opera firefox and ie7

ck1999

 

[TheCandyman]

mmm... yes i see that too. I could drop the link 'href' to the picture so clicking it wouldn't do anything. Guess i don't really need that anyways.

Still not sure what to do about the IE6 image flashing. When you mouse over the bottom row, smaller images you'll see the larger ones flash. Since IE8 is starting to be automatically pushed to all users, i wouldn't worry too much about it if we were a year later, but still have to program for IE6.

 

[ck1999]

If you leave off href it will not work in IE7. If you use href="#" then it will make the image stay up on your screen until you click somewhere else.

ck1999

 

[ck1999]

Candyman

as far as the flickering in IE is it because it is making the page longer. Have you tried puting more space between the photos and the bottom of the page. Or for the last row have the larger photos move higher on the page.

ck1999

 

[TheCandyman]

click on the client testimonial page, you'll see for each row of images it flickers. I think it's to do with either <br> or <p> below each image.