Some CSS goodness

By dave on December 30, 2003 12:38 AM | Permalink

I've been doing some web design for a friend of mine. The previous design she had involved all sorts of bletcherous IE specific stuff and a metric buttload of javascript and cack to get image popups working.

I've recreated that effect with pure CSS on Vicky's pages. It wasn't easy to get IE to play along, but I got it in the end. If you look at the CSS, the key to the image popups is:

DIV.thumbnailbox A SPAN { display: none; }

DIV.thumbnailbox A:hover { display: inline; }

DIV.thumbnailbox A:hover SPAN { display: block; position: absolute; top: 0em; right: 0em; z-index: 102; }

/*Hack to stop IE being a pain in the butt*/ /* This moves the popups over to the left because IE gets it wrong.*/ *html DIV.thumbnailbox A:hover SPAN { right: 15em; }

This turns off the SPAN, which is itself an image, until you mouseover it, when it appears in a fixed location.

The key to getting it to work in IE involves the A:hover declaration and the hack selector at the bottom. without the first, the images don;t appear at all, and without the second, they get absolutely positioned to the parent element to the actual containing element, for some strange reason and need to be repositioned with the hack.

It works perfectly well in Mozilla without those hacks, but IE is what most people use, so it has to work in that steaming pile of cack.

Unsolicited Bulk Email (spam), commercial solicitations, SEO related items, link exchange requests, and abuse are not welcome here and will result in complaints to your ISP.
email the webmaster
Any email to the above address may be made public at the sole discretion of the recipient.