Image map width a:before – and Safari

[Morten]

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

???

[SgtLegend]

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;

}

[Morten]

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

[SgtLegend]

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

[Morten]

Ups …..
and again 1000 thanks

[SgtLegend]

No problem

[Author]

Posts