I have attempted to use the CSS techniques from two or three sites to
create a CSS only image gallery. I am muddling the affair by placing
the thumbnails in one float, the page text in another float, then
using absolute positioning (and z-index) to display the image over the
second float.
The CSS for the thumbnails is from "Web Accessibility At C-net.us" by
K Chayka (http://accessat.c-net.us/test/gallery2.html). The CSS to
display the image when the thumbnail is clicked or receives focus via
the keyboard is based primarily on the 'slideshow' example at Stu
Nicholls' CSSplay (http://www.cssplay.co.uk/menu/slide_show.html). I
also reviewed the 'Hoverbox Image Gallery' example at Sonspring
(http://sonspring.com/journal/hoverbox-image-gallery) prior to
beginning on my page.
The result can be seen at:
http://rick.threesixtyphoto.com/gall...traits_v2.html
Things work as expected in Firefox 1.5.0.6. And, almost, in IE 6. And,
not very well at all in Opera 8.54. These are the only browsers I have
installed.
In IE 6:
- clicking a thumbnail does not always display the image
- if I move the mouse cursor off the thumbnail to an adjacent
thumbnail, the image will usually display
- if I traverse (click/tab) the thumbnails in the order they are
entered on the page (forward or backward) the images will display
- if I click a thumbnail out of this order, I need to move the mouse
cursor to an adjacent thumbnail to get the image to display
The CSS validates (W3C CSS Validator) with the exception of the
'display:inline-block' and 'cursor:hand' entries used in displaying
the thumbnails. The xHTML also validates using the W3C HTML Validator.
This is a development area only, so please ignore the current size of
the thumbnails, etc. For now the CSS for the gallery is included in
the page. The default CSS for the site look and feel is loaded from a
separate file.
I am hoping someone can explain the behaviour in IE6 to me. And,
perhaps offer a way to eliminate this unexpected behaviour. Nothing
similar seems to happen with the examples at the sites mentioned
above.
Please also note that I am not a professional web developer of any
sort. I am trying to help a friend.
Thank you,
Rick