I am pretty happy with how my image galleries came out.  I knew exactly what I wanted: a small set of thumbnails arranged in rows and columns that, when you roll over them, a large image appears elsewhere on the page.

I found a very elegant way to do this, using an unordered list, spans and hovers, and absolute positioning in CSS.  It allowed me to display all large images in the same location when you roll over a thumbnail.  Only, I wanted to add more than one line of text to the hover image, so I would have needed to use a break, which would invalidate the page, as breaks aren’t allowed within list items. And paragraph tags aren’t allowed within spans.

I had to give up on using the elegant unordered list, and ended up assembling a way to do exactly what I wanted with nested divs, spans and hovers.

Only then I couldn’t get my emulation of IE6 to recognize the large images on hover!  It’s always something!   And if it’s trouble, you can bet it’s usually caused by Microsoft.  Sigh!

Finally I found a small JavaScript tutorial with CSS that was easily added to my existing code (yes, I had already coded all my portfolio pages before discovering the anomaly with IE6!).

This pops up a window with the large image when the thumbnail is clicked, for those 26% of folks still using IE6.  Can’t ignore them, you know.

Probably not the most lovely solution, but see what you think.  I have installed the script on the Web Design Portfolio page.

After you look at it, please head on back here, and let me know if you like it, hate it, if it doesn’t work for you, or if you know of a sleeker solution!  And if you wouldn’t mind, please let me know what browser you’re using on what OS (always helpful).

Thanks!

Sometimes, the best thing you can do when your eyes are bugging out of your head from staring at the same damn code hour after hour, day after day, while the solution to a tiny niggling code alignment issue still escapes you — is quit. Step awaaaay from the computer, have a great dinner and conversation with your sweetie, drink some beer or wine (or both), watch The Daily Show and the Colbert Report, and then get a good night’s sleep.

In the morning, suddenly it becomes clear.

As did my footer alignment issue this morning when I took a fresh look at the code. Duh! Of course, the way I had originally coded it was pushing it out of line, but I just couldn’t see that yesterday, after it seemed to break once I corrected my missing div. After days of it appearing perfectly correct (while the pages wouldn’t validate), I was just so anxious to be done with my new design already!

And now, I am very nearly done! Woo-hoo!

Immovable object, meet irresistable force!