Can somebody please have a look at this code - I have it working perfectly in FF (for what I need it to do). In IE however, its not working because I'm using display: none; instead of invisible. I googled around and found this website here: http://www.tjkdesign.com/articles/css pop ups/6.asp that tries to explain how to make an IE version of the stylesheet but I can't get it right - can somebody please show me how to do this? My work is here: (the same image appears on the rollover - thats just for testing purposes) Thank you. http://www.clubluna.ie/my/davover.html
you can't render <span1> <span2> - You must classify them as <div class="span1"> - IE won't recognize your format which is why you are seeing the issues. I recoded your spans and they render properly when placed as classes .span1 / .span2
You don't need to change your spans to divs (in fact, YOU CANNOT put a block like a div in an anchor), but they do need to all be called "span" and you'll need to give them a class. <span class="first"> or Design's <span class="span1"> Note you cannot name classes or id's starting with a number, so no class="1" allowed. Second, it almost doesn't matter what you use to make stuff go away and appear on the page. IE doesn't like any of it. However, know that display: none and block, or visibility: hidden or visible are both BAD ways of doing it simply because of screen readers being stupid dicks about it-- you WANT them to ALWAYS see that text and for some unknown reason they obey visibility: hidden and display: none. Rolly eyes. So anyway, the BEST methods involve moving the stuff off-screen and back on (with either absolute postioning or margins or whatever... every browser has its own preferences). That aside, you still will have issues in IE (or, I expect you to). IE needs a "push." This'll be confusing, because I like to use what I just told you not to use: thing:hover { visibility: visible; } thing:hover { margin-left: 0; (assuming it was margin-left: -99999em or somehow offscreen) other hover thingies you want } The first declaration (which NEEDS to be ALONE and not merged with the other hover declaration) is a push. IE doesn't like changing places and display states or any of that, but it will do it if you say something about the :hover itself. You could say visibility: visible because that doesn't actually change the way the thing looks (it already was visibility: visible because we never changed it). But you could also say background-color: black; or font-weight: bold; or foo: bar; but the last one's invalid and the others change the way your thingie looks. So, we don't use those. But those were actually the first triggers found, if you surf teh interwebs and read the older forum questions. IE needs you to say something specific about the hover. It almost doesn't matter what you say (there are a few things that don't work but I don't remember what they are cause I only use one or two things) but the important thing is that you say it BY ITSELF. You can see this on my Map Hover I think. Yup, thar she be: /*IE trigger*/ #kaart li a:hover { visibility: visible; } Have fun. -poes
Tried everything - not working - I luv IE soooo much, I enjoy how it makes me spend time trying to come up with a version that of a website that it likes. (Sarcasm)
Keep trying. It can be done : ) I looked at the page you posted, no change in code. Still the span1's etc.