Artifacts being left on screen with CSS popup 1

fdarkness · Jun 28, 2006

I'm using the "pure CSS popup" from

http://meyerweb.com/eric/css/edge/popups/demo.html.

it creates a popup box on a hover action, but uses only CSS and no javascript. (I've fixed the bugs in it so it does actually work).

The CSS code I have is:

Code:

div a:hover {text-decoration: none;
	border: none;}

div a span {display: none;
	padding: 5px;
	color: #000000;
	font-size: 12px;
	width: 200px;}

div a:hover span {display: block;
	position: absolute;
	top: 200px;
	left: 150px;
	width: 300px;
	padding: 5px;
	z-index: 100;
	color: black;
	border: red 2px solid;
	background: white;}

and the HTML for it is:

Code:

<div id="popup"><a href="#">Text to MouseOver<span>Text to pop up</span></a></div>

So far, the code works, but the problem is that it leaves artifacts... part of the box that pops up stays visible after leaving the text that's being hovered over and if you mouse over the section where the box popped up, it comes up again!

I've tried playing with the positioning and it seems to only be leaving the artifacts when position = absolute. But I've seen several other samples that use the same thing and don't leave artifacts or pop up again if you mouse over the area.

Any ideas as to what's wrong with this?

fdarkness · Jun 28, 2006

If it matters, I'm using IE 6.0 SP2.

Vragabond · Jun 28, 2006

You think you can give us a link so we can experience this for ourselves?

fdarkness · Jun 28, 2006

I'd give you a link if I had one, but sadly, the page is on an internal network. Let me see if I can duplicate it at home and I'll post a link to it then.

fdarkness · Jun 28, 2006

Ok, here's a test page I created with the exact code listed above.

http://darkness.mine.nu/testpage.html

You have to check it in IE. It works perfectly in FireFox, but in IE, it pops up and stays as an artifact (if you scroll or alt-tab to another window and then back, it goes away). And it pops back up if you mouse over the spot it used to be on.

It's looking like some sort of IE quirk, but I have no idea why it would show in my code but not the other samples that I copied this off of!

Vragabond · Jun 28, 2006

This was an easy solution. Add a proper doctype to your page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Or select one from here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

fdarkness · Jun 29, 2006

That worked perfectly! Thank you!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Artifacts being left on screen with CSS popup 1

fdarkness

Programmer

fdarkness

Programmer

Vragabond

Programmer

fdarkness

Programmer

fdarkness

Programmer

Vragabond

Programmer

fdarkness

Programmer

Similar threads

Part and Inventory Search

Sponsor