Treehouse: Grow your CSS skills. Land your dream job.

map images on safari

  • # October 15, 2012 at 5:29 am

    hi there!
    I am having a bit of a problem with a map image which happens to be absolutely useless in safari, It works on any other browsers, it is just safari… I have tried 4 different examples and It would just keep the same. So
    here is my html: ( each line begins with < )
    ///////

    a href=”#” class= “menu”>
    image with all the tags and measurements>
    span> <_img src="images/nav-icons.png" border="0"_ usemap="#Map" map>
    map name=”Map” id=”Map”>
    area shape=”contact” coords=”30,11,144,43″ href=”contact_venisha.html” title=”contact” alt=”contact”/>

    area shape=”bio” coords=”184,10,281,44″ href=”bio_venisha.html” title=”bio” alt=”bio”/>

    area shape=”shop” coords=”315,13,407,42″ href=”venisha_shop_working.html” title=”shop” alt=”shop”/>
    /map>
    /span>
    /a>

    ///////
    and here is my css:

    .menu span
    { /* zoom picture*/
    position:absolute;
    visibility: hidden;
    top: 15px;
    left: 0px;
    height:51px;}

    .menu
    {
    position:fixed;
    top: 15px;
    left: 200px;
    height:61px;}

    .menu:hover
    { z-index: 1;}

    .menu:hover span
    { visibility: visible;
    top: 3px;
    left: -15px;
    height:51px;
    z-index: 1;}

    ///////

    thanks for your time and your brains!

    # October 15, 2012 at 5:31 am

    the black area is not displaying the html in full, here it goes again



    contact bio shop


    # October 15, 2012 at 5:34 am

    Share it on Codepen: http://codepen.io

    # October 15, 2012 at 5:43 am

    https://gist.github.com/3891717
    thank you senff!

    # October 15, 2012 at 5:58 am

    It’s not about the code itself, we’ll need to see it in action. By putting it on Codepen, we can test it ourselves and see what’s wrong. Will save us a little bit of trouble, thanks!

    # October 15, 2012 at 6:04 am

    http://codepen.io/merikiterunner/full/uLJwb
    ??

    # October 15, 2012 at 6:06 am

    thanks

    # October 15, 2012 at 6:41 am

    It won’t work unless you actually provide valid image links.

    http://codepen.io/merikiterunner/pen/uLJwb

    Frankly the whole thing screams for a sprite..based on what I can see now.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.