css-image-gallery IE problem

[auntnini]

I used basic DynamicDrive CSS hover/span technique http://www.dynamicdrive.com/style/cs...gallery/#thumb
with only minor IE variation at http://artdemo.tripod.com/illustration/indexCSS.html -- where I also use my own CSS hover/span for button notations.

Now -- even after a lot of tweeking -- I'm still having a real hassle with latest IE at http://www.chanit.com/gallery/index.htm Before adding columns (with overflow: visible) the rollover image was way off right side of screen. In my latest 2/18/07 version, the rollover does not work in IE -- have to rollover-click-rollover for larger span-image to display.

I remember from somewhere that IE does not support pseudo hover state unless it is used in a link. In one of my tweeks, I changed style to A:HOVER but that only caused other problems. I forget all my other tweeks and results. I'm only using the "galleryContainer" as a "picBox" to hold the thumbnail and text together. I want the absolute positioned rollover aligned in relation to the thumbnail (which I have therefore positioned relative).

Does anyone have an IE fix or other solution (e.g., mistakes in my tweeked code)?

[auntnini]

Hating to make viewers do extra clicking, fell in love with DD’s CSS-image-gallery http://www.dynamicdrive.com/style/cs...gallery/#thumb and used the simple version without major IE/Win problems at http://artdemo.tripod.com/illustration/indexCSS.html.

Moving on to a much more complex version at http://www.chanit.com/gallery/index.htm major IE/Win problems surfaced: had to click-hover-click to make large span image display and opacity (even with z-index bumped up to 200) was not correct. Also had background problem on Firefox/Win.

Was hoping some wizard could give answers (or a clue) to these IE/Win problems.

Tried to simplify the CSS with <DL> definition list, <DT> definition terms, and <DD> definition descriptions at http://www.chanit.com/gallery/indexDL.html -- which looked fine on Firefox/Mac and Opera/Mac, but two column layout was lost on Safari/Mac.

YUCK! On IE/Win <DL> version layout was an utter disaster (improved slightly with font reduction) and still had click-hover-click and opacity problems.

Not knowing when to let go of an idea . . . does someone have some wisdom they can share regarding CSS hover/span rollovers?

[SP: tweaking ... tweaks ]

[auntnini]

Seem to be talking to myself, but -- just in case anyone is looking -- here’s <DL> definition-list version update.

Three versions: First http://www.chanit.com/gallery/index.htm based on Dynamic Drive’s CSS-image-gallery.

Second http://www.chanit.com/gallery/indexDL.html used <DL> with both thumbnail and caption in <DT> and text in <DD>, which caused major two-column layout problems in IE/Win and Safari/Mac and absolute disaster in IE/Mac:
#colLeft dl { margin:10px; padding:10px; width:95&#37;; text-align:left; float:left; overflow:visible; }
#colLeft dt { margin: 1em 1px .1em 0; padding: .5em 0px .1em 0px; text-align:left; }
#colLeft dt img { float: left; margin: .2em 10px .75em 10px; padding: 5px; }
#colLeft dd { margin-left:1px; margin-top:1px; margin-bottom:.5em; padding:.25em; text-align:left; float:left; }

And defined anchor tags for hover/span:
a span { display: none; }
a:hover span { display: block; position: absolute; top: -400px; }
#colLeft a { position: relative; display:block; } #colLeft a:hover span { left: 100px; }
#colRight a { position:relative; display:block; } #colRight a:hover span { right: 100px; }

Third http://www.chanit.com/gallery/index.html used <DL> with caption alone in <DT>, thumbnail-class in separate <DD>, and text in another <DD>, which seemed to fix layout in IE/Win but did not solve Safari/Mac and IE/Mac disasters:
#colLeft dl { margin: 10px; padding: 10px; width: 95%; text-align: left; float: left; overflow: visible; }
#colLeft dt { float: right; width: 10em; margin: .5em; padding: .5em; text-align: left; }
#colLeft dd { margin-left:1px; margin-top:1px; margin-bottom:.5em; padding:.25em; text-align: left; float: left; }
#colLeft dd.pic img { float: left; margin: 10px; padding: 5px; }

Still having IE/Win click-hover-click and opacity problems in all versions. IE/Win layout broken in version /indexDL.html but layout OK in /index.html. Also Firefox/Win opacity and hover-background problems persist in all versions.

On IE/Mac /index.htm version layout OK, but both /indexDL.html and /index.html versions had broken layouts and NO HOVER! Firefox/Mac hover-background OK but opacity problem in all versions. Safari/Mac /index.htm OK, but layout broken in both /indexDL.html and /index.html. Opera/Mac all versions OK.

Tried all sorts of things with z-index to fix opacity problem: created .pix class with z=50, thumb class z=10 and text(p)=1; making columnLeft z-index=2 and columnRight z-index=1 overcame document flow but reversed opacity problem. Don’t have a clue what to do with hover-background problem in Firefox/Win (tried “add float to fix float,” etc.).

Finally included an additional pop-window in /index.htm (the first DD-based version) to overcome click-hover-click, hover-background, and opacity problems.

Discouraged but not disenchanted with CSS hover/span and <DL> definition-list methodology.