tanfa - archived muse
:: View Archives List :: Home :: Skip to Have a Muse
Archive dated September 2, 2003
Pure CSS Popups Bug in IE
I've finally got around to documenting some research I did into this bug.
Peter-Paul Koch documented his findings also which led me down the correct path for testing
i have spent the last six hours trying to figure out why my page wasn't working like all the others i've coded. It is now 4:00am and i can finaly go to bed.
Thank you!!
Cheers, Azore.
Posted By Azore on 28/11/2003 at 12:26pm «þ»
Thank you for the work around! I spent 4 hours on trying to solve this problem, you are my saviour! Lucky I google... =)
Posted By ktml on 29/01/2004 at 4:07am «þ»
Hi!
I actually had figured this bug out by myself by stripping down a working example, but now I have issues with the stuff not disappearing onmouseOut.
Any Idea why that is?
Posted By SergejKotliar on 12/04/2004 at 0:21am «þ»
!Serge, yes it happens if the popup has a background colour or image. If you can the use of the visibility property to toggle the pop-up instead of display, should correct it. It's another IE Bug 
Posted By Claire on 07/05/2004 at 13:17pm «þ»
Thank you! I, too, couldn't figure why it didn't work when it had before... :-)
Have to tell you that your demo does NOT work in IE5/Win2K (the real thing, not stand-alone) though. Which is odd because adding a color declaration works fine with my own problem. IE, IE...
Posted By twaddle on 08/08/2004 at 23:40pm «þ»
I wanted to comment on the fact that the bug mentioned in IE for the PC is also present on the Mac side, exactly as described. I was despairing at having to use javascript to sniff the browser/version and then writing (truly) elaborate workarounds for my client's site. Thanks for solving the problem.
Susan Wood
Posted By SusanWood on 12/08/2004 at 0:57am «þ»
i hope someone can contact me via email.
i have tried and tried, and tried and i just cant get this to work properly on my site.
it works in mozilla but not in IE. help!!!
Posted By john on 12/09/2004 at 13:48pm «þ»
Thanks so much for the workaround!! I too, couldn't figure it out, and was directed here by google. Thanks again, you made my day!!
Posted By MarkUrbanski on 28/01/2005 at 18:55pm «þ»
I've been struggling with this since first reading Eric's article. I had a similar problem - my "link text" is an image, so I hadn't bothered to define the styles for the basic "a", "a.visited" and "a.hover" at all - I'd gone straight to the "a span" versions..."visited" worked, but not hover. Thanks a million!
Posted By AlisonPeck on 29/01/2005 at 14:24pm «þ»
Don't think I made it clear - the fix was to define the "plain" styles before doing the "span" ones!
Posted By AlisonPeck on 29/01/2005 at 14:27pm «þ»
It's worth mentioning that this fix will _not_ work if the offending hover is located in a container that is not positioned _relative_. Any other positioning type, fixed, absolute or static will foil this workaround.
Posted By KirkClendinning on 14/02/2005 at 17:09pm «þ»
I think that my problem is slightly different...
<ul class="button">
<li id="popout">
<p class="navlinks">
<strong>PRODUCTS</strong>
</p>
<ul class="popped">
etc... works great in FF and not at all in IE .. and the css...
#popout:hover li{
display: block;
list-style-type: none;
}
#popout:hover li {
color: white;
left: -60px;
}
#popout li {
display: none;
list-style-type: none;
color: white;
}
Posted By Mark on 10/03/2005 at 22:09pm «þ»
I have an even weirder issue... The hack works perfectly, and I surrounded my link with a <div> that is set to display:inline to keep from upsetting the rendering, but to allow an upper left point of reference to use for positioning the hover block...
Does that make sense?
Works beautifully in IE6 and FF1.3 but Safari 1.3 renders only part of it, and an artifact remains on mouseOut...
To see it in action, go here and mouse over "Printable Order Form" in the footer links... you have to use Safari of course.
--gabe
Posted By Gabriel on 13/05/2005 at 1:51am «þ»
Hello.
There is one more important rule for IE. If You use <a>test</a> in Firefox and Opera will be work, but not in IE. When You try <a href="#">test</a> then popup will be work in IE well.
So, there must be href in <a> to works well in IE.
Regards,
Cezary Kobylinski
Posted By CezaryKobylinski on 10/06/2005 at 16:47pm «þ»
Potential++ :) I had a go at putting images on all the spans and I was wondering how would you go about getting all the popups to display in the same place as opposed to lining up with the href. See the bunny page i put up. It'd be great if they could all display at left:150px and top 50px or something.
Posted By Hobbz on 26/07/2005 at 5:01am «þ»
I can't for the life of me get this to work... as usual, it's great in Firefox and nonfunctional in IE. Is it because my div is nested within some absolutely-positioned divs, even though the immediate parent div is position:relative? It doesn't seem reasonable that this would be the case, as it would severely restrict layout...
If anyone would like to take a look, here's the page I'm testing on. The CSS sheet is here. I'm trying to implement the code on the Calendar feature.
I'm always open for suggestions and advice. :) Thanks so much for any help you can offer, and thanks for all the research done on this!
Posted By Julie on 05/08/2005 at 7:52am «þ»
Julie,
try adding
#calendar a:hover {text-indent: 0;}
IE also needs a rule declared for a:hover before it will accept a rule for a:hover span..
again it doesn't have to be text-indent it can be any default rule as afaik as long as there's something there
OHHHHHHHHH I see! Thank you so much, it's working now, phew! Not working exactly right (typically) but it's working and I can fix the rest. 
Thanks again, Claire!
Posted By Julie on 06/08/2005 at 16:29pm «þ»
I've got one other question for you kind people... the popup I have is text over a solid background, designed to cover up some preexisting text on the page. It works in FireFox... but in IE it only displays the text. here is the page, here is the css. Again, it's the Calendar feature that I'm using this on...
I was sure I got this working properly at one point and then my computer died, so I've completely lost track of what I'd done previously. 
Thanks so much for your assistance!
Posted By Julie on 31/08/2005 at 0:20am «þ»
I'm trying to combine this with Eric Meyers multi-level menu but this seems too difficult to have as a simple solution. any suggestions or has anyone done this before? The code I have for the moment is such a mess so I'm not putting it here :-). Peter.
Posted By PeterVertenten on 25/10/2005 at 17:32pm «þ»
Thanks for this fix - it saved a lot of headaches..
I may have discovered another weirdness with the pure css popup-
on Firefox, it normally works perfectly UNLESS there is a visible <iframe> on the page, then there is noticable annoying "flashing" on mouseover - remove the iframe, problem disappears.
Posted By Wyzyrd on 10/11/2005 at 17:24pm «þ»
Another trigger:
#popup a:hover {
color: #f00;
display: inline;
}
Now it works fine on ie alsow!
Posted By polyetilen on 13/04/2006 at 13:50pm «þ»
But the best way is to use everywere the same:
display: block;
and remove it from #popup a
Like this:
#popup a, #popup a:visited {
position: relative;
/*display: block;*/
}
#popup a img { border-width: 0; }
#popup a:hover img {border-width: 0;}
#popup a span {display: none;}
#popup a:hover {
display: block;
color: #f00;
}
#popup a:hover span{
display: block;
position: absolute;
top: 0em;
left: 0em;
border: 0px solid black;
padding: 0em 0em;
cursor: default;
z-index: 10;
background-color: #FFFFFF;
text-decoration: none;
text-align: left;
}
works everywere! :)
Posted By polyetilen on 13/04/2006 at 14:07pm «þ»
What a fantastic article, and a solution that astonishes me! I thought I'd be wading through lines of javascript to get the same result.
Unfortunately, I have a problem with this: I have several columns of options that I want a popup to appear from. The popup will include a link, so needs to be nearby, as in your example. However, the popups are appearing behind the other options. I need them to appear over, so I can click on them. What would I need to do to achieve this? Is it possible?
Posted By Brenty on 31/05/2006 at 11:23am «þ»
Thanks for the article and hosting the discussion. Amazing how many layers I had to wade through to get to the end of this. I'm left with one thing I can't get rid of on IE - the underline of the anchor text outside the span. This in spite of reiterating text-decoration: none in each of the styles...
Posted By TomvonAlten on 05/06/2006 at 20:09pm «þ»
Sorry but muses are now closed on this article
previous :: top of page :: next
Nice find! Thanks for doing the research. I have never come across this bug myself, but if I do, now I know what to do
Posted By Rainer on 21/11/2003 at 2:09am «þ»