css focus not working in safari and chrome

Question

I got one strange problem which I never got before. Please see this code:

The css:

#btn{
    margin-left:150px;
    padding:10px;
    display:block;
         


        

Answer 1

The solution posted by user1040252 did the trick for me.

I have a div with images that sets an image in a span tag to visible on a click. Firefox ignores the classname:focus in my CSS file.

My CSS (part of it):

.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
    visibility: hidden;
    position: fixed;
    top: 20px;
    left: 20px
}

But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here: explanation: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm try it: http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm

But adding tabindex="0", as in

works like a charm. One click opens the hidden span, and the second one closes it very neatly.