#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0

    [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
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    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&reg;:</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.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    Great! It works just fine now! (It really took me days just to get... nowhere...)

    Thanks for the quick reply!
  6. #4
  7. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    heh...np...if ya need me again...ill be here
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    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
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    woah! thats sooo cool kk5st! thanx for that!
    ...and i though i had css all covered...
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    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.
  14. #8
  15. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    *bows* thank you thank you, pleaz, youre too kind :P
    jkjk
    kk5st, its alright, i thought what you provided was pretty cool
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Netherlands
    Posts
    10
    Rep Power
    0
    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?
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    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
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo