Grow your CSS skills. Land your dream job.

Image map width a:before – and Safari

  • # November 24, 2011 at 8:31 am

    I´m making an image map width popup info – pure CSS
    see the red dots http://lilleweb-development.dk/egeskov/kort.html

    This works fine i FF, IE9, IE8 but not in Safari

    }
    ul.kort li a:before{
    height: 10px;
    width: 10px;
    background: red;
    content: " ";
    display: block;
    }
    ul.kort li a .beskriv {
    display:none;
    background-color: #f2f2f2;
    padding: 10px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    -webkit-box-shadow: 0 0 10px #666; -moz-box-shadow: 0 0 10px #666; box-shadow: 0 0 10px #666;
    margin: -10px 0 0 -10px;

    }
    ul.kort li a:hover .beskriv {
    display: block;
    }

    If I change the

    display: block;

    to

    float:left

    like this

    ul.kort li a:before{
    height: 10px;
    width: 10px;
    background: red;
    content: " ";
    float:left;
    }

    Then you can see the red dots in Safar …. but the hover still not working

    ???

    # November 24, 2011 at 8:40 am

    Trying using display: inline-block; as anchor elements are inline elements which wouldn’t let the :before and :after pseudo elements to render as block level elements.

    To fix the hover issue simply add display: block; to your anchor element and for ul.kort li a .beskriv add:

    ul.kort li a .beskriv {
    position: relative;
    z-index: 9999;
    }
    # November 24, 2011 at 8:45 am

    @SgtLegend
    Hi and thanks …. now you can see the dots i Safari … but hover still not working

    # November 24, 2011 at 8:48 am

    Like i said in my previous post if you add display: block; to ul.kort li a the hover will work fine.

    # November 24, 2011 at 8:52 am

    Ups …..
    and again 1000 thanks

    # November 24, 2011 at 8:59 am

    No problem

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".