Some CSS goodness


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.

About Me


  • 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.
  • Any email to the above address may be made public at the sole discretion of the recipient.

Other Stuff

  • Powered by Linux
  • (RedHat Linux)


Monthly Archives

About this Entry

This page contains a single entry by dave published on December 30, 2003 12:38 AM.

Closing Entries was the previous entry in this blog.

FBI Issues Alert Against Almanac Carriers is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.