- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
???
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;
}
@SgtLegend
Hi and thanks …. now you can see the dots i Safari … but hover still not working
Like i said in my previous post if you add display: block;
to ul.kort li a
the hover will work fine.
Ups …..
and again 1000 thanks
No problem