This all started when I wanted a way to hide some content unless requested. I had already used the link:hover method for some tooltips, and wanted to take a crack at adapting it for this purpose.
I'm avoiding the use of JS, because the nature of my site lends itself to use on cellphones--and even where JS is supported, it's loading is noticeable and, when it fails, can make a site frustrating to use.
So, I've got an an iframe in a div tag in an anchor tag with a timestamp-generated url. Actually hiding the iframe was causing it not to load in IE, so I have, instead, set it's height to 0 until it's in the "visited" state. Originally I just used the div, but the link attributes were carrying over, so I introduced the frame. In FF this worked as expected (why would you apply link status to the elements of a frame the link doesn't reside in? (granted, the further question, "why would you ever wrap a frame in an anchor tag in the first place?" is valid enough)) but in IE, the "linked" state interferes, partially, with the functioning of the frame.
The cursor is normal, but when you try to click on anything in the frame, the regular url-indicating pointer appears briefly. Links within the frame work fine--but forms are tricky. You can only set your caret in a form field on the second click within the frame. The first click seems to put the focus in the frame; afterwards clicks into the form fields work well enough. The final caveat is that nothing can be selected with the mouse within the iframe, including any text the user has put in the form field.
I've played with z-indexes to no avail, and also attempted setting the visibility of the link itself to hidden, when visited (which worked, but didn't kill the I'm-still-going-to-pretend-I'm-a-link behavior in IE.
Thoughts?
Relevant code: html:
<a id="t-l" href="#<?php
echo time();
?>a" class=hidebox>save/share<div><iframe src="addtoany.php?pageID=1962460927" frameborder=0></iframe></div></a>
CSS:
.hidebox {}
.hidebox iframe {height: 0px; width: 300px; background-color:#393242;}
.hidebox:visited {}
.hidebox:visited div {width:300px; height:400px; padding: 10px 0px 0px 10px;}
.hidebox:visited iframe {height: 400px; width: 285px; border: 0px solid #393242; margin: 0px auto 0px auto;}