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

RE Kochanski <barkncats@yahoo.cawrote:

>http://rick.threesixtyphoto.com/gall...traits_v2.html

Size of main page:
12800 bytes
Number of inline elements:
29 (29)
Size of inline elements:
4426053 bytes

Good grief almighty, that's some seriously misguided coding you have
there.

--
Spartanicus

On Sat, 12 Aug 2006 19:41:48 +0100, Spartanicus
<invalid@invalid.invalidwrote:

>RE Kochanski <barkncats@yahoo.cawrote:
>

>
>Size of main page:
>12800 bytes
>Number of inline elements:
>29 (29)
>Size of inline elements:
>4426053 bytes
>
>Good grief almighty, that's some seriously misguided coding you have
>there.

Thank you for you comment, and, my apologies.

If I can get the page to work, I will be talking to my friend about
reducing the sizes of the thumbnails and/or images, as well as
reducing the DPI and increasing jpg compression wherever possible.
And, the CSS will be moved into a separate file.

I should have thought about these issues and done something about them
before posting the demo page(s) and my request for assistance.

I am, however, given the goal, unable to see how one would go about
reducing the number of inline elements. Nor, how one can reduce the
total size of the inline elements to something approaching a few
hundred kb.

Regards

RE Kochanski <barkncats@yahoo.cawrote:

>
>Thank you for you comment, and, my apologies.
>
>If I can get the page to work, I will be talking to my friend about
>reducing the sizes of the thumbnails and/or images, as well as
>reducing the DPI and increasing jpg compression wherever possible.

Instead of filing at the edges you should solve the problem, it's
madness to embed all the full size images on the thumbnail page.

Have a look at http://www.porjes.com/butterflies/ for a demo of how to
do this properly.

--
Spartanicus

Spartanicus <invalid@invalid.invalidwrote:

>Have a look at http://www.porjes.com/butterflies/ for a demo of how to
>do this properly.

Apologies, I recommended this based on the reputation of it's creator
without looking how it was done. It turns out that it uses a hack that
I'd advise against.

--
Spartanicus