[CSS] display:none to display:block in IE

My first message/question here at devshed.

I've put a <span>text goes here</span> within a link. The default display is none. On a:hover the text should be displayed within a box at the left of the link.
I've seen this in work at several sites, and it does work in Mozilla, but it should also work in IE (6). All the examples I've seen work in exactly the same way as I implented this trick. But I can't get it to work in this site I'm making now.

Testpage

Stylesheet

Look for the div called "leasevoordelen", almost at the bottom of the page. The identifier for the span is called "more".

I hope someone has experience with this problem, because after days trying all kinds of things, I still can't get it to work

sorry, ic ouldnt really specify the exact items within your code....
however, here is your solution:

<div id="leasevoordelen">
<div><b>De voordelen van Almat Keukenlease®:</b></div>
<div><a href="#" onMouseOver="document.getElementById('more').style.display='block'" onMouseOut="document.getElementById('more').style.display='none'>direct genieten van uw nieuwe keuken<span class="more" id="more"><strong>Sparen of...</strong><br /><br />
Een keuken kopen is een grote klus en doet u maar een enkele keer in uw leven. Vele vragen moeten beantwoord worden. Zoals, welke kleurstelling kiezen we, welk materiaal aanrechtblad heeft de voorkeur en welke inbouwapparaten willen we in de nieuwe keuken. Allemaal belangrijke vragen om uw keukendromen goed te kunnen realiseren. Maar er is een vraag die eigenlijk eerst gesteld moet worden: Hoe gaan we die nieuwe keuken betalen? Vroeger was het heel gewoon dat er gespaard werd maar tegenwoordig kiezen veel mensen voor een financieringsvorm waarbij de aanschafprijs van de keuken gespreid wordt over meerdere jaren.</span></a></div>

that should do the trick.

Great! It works just fine now! (It really took me days just to get... nowhere...)

Thanks for the quick reply!

heh...np...if ya need me again...ill be here

Check out Eric Meyer's page. There is a bug (imagine that) in IE that Eric inadverdently fixes in his code. I don't recall the reference to the bug(s), so I can't tell you what they are at this time. It has to do with the attributes. Experiment with Eric's working style frag; that should fix you up.

cheers,

gary

ps: it's pure CSS, no js

g

woah! thats sooo cool kk5st! thanx for that!
...and i though i had css all covered...

I've seen and read that page before. It was one of the pages that lead me to use this CSS-trick myself. This example works OK in IE, but in the page I made (I think exactly like that) it didn't work! But thanks to Terminal now it works in both browsers.

Perhaps you can check my testpage again and test it in IE. The first rollOver on the right has the correction suggested by Terminal, the others the way it should have worked (Eric Meyers way). The first one works, the others don't.

*bows* thank you thank you, pleaz, youre too kind :P
jkjk
kk5st, its alright, i thought what you provided was pretty cool

Just one more reply to this, because it would be more efficient if it could be solved entirely through CSS. And also because I want to understand why it doesn't work in CSS this time:

Do you have any idea what can cause it not to work this time in CSS, while the structure is (in my opinion) an exact duplicate of the one by Eric Meyer?

OK, here's the reference I was too lazy to look up before. I just checked, and the hack works. It seems like half the time coding is devoted to fixing/hacking the bugs and non-compliant behavior of the dominant PoS browser from MS.

cheers,

gary