Question

My JSP displays a button as shown below:

<div id="verify" style="position:relative;height:50px;">
   <a id="key_verify" class="generic_link" href="#">
       <span class="verify_span">Verify</span>
   </a>
</div>

The stylesheet is shown below:

span.verify_span {
    background: url("/images/normal.png") repeat-x scroll 0 0 transparent;
    color: #000000;
    display: inline-block;
    float: left;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    line-height: 41px;
    margin-top: 20px;
    padding: 0 20px;
}

a.generic_link {
    text-decoration: none;
}

JS is as shown below:

$("#key_verify").click(function () {
       ...// perform task
 }

When I click tab on keyboard, it points somewhere else & not entirely on the exact button but only on the text “Verify”. If you observe the tab on other websites, usually it shows dotted line across the border of the button but in my case, it shows dotted line only on the text “verify”

How can I make my tab appear properly on the entire button?

Thanks!

Answer 1

The float:left in your CSS is making span float relative to the <a> that contains it. Since the <a> has no other content, it is collapsing to nothing and the browser is making it untabable.

Since you are already making the span inline-block, there is really no reason to also make it float:left.

Personally, I would advise you against doing all these layers. You could just get away with <a id="key_verify" href="#">Verify</a> and do all the rest of the work in the CSS. It is much cleaner.