CSS - Why I see the dash-line when I click a Link with Firefox

Question

Hello all,

   <div class="b1 b2" id="b1-wrap">
    <h1 class="header"> <a class="header" href="a.php">Test<span id="001">(XXX)</span></a></h1>
   </div>

#b1-wrap {
cursor:pointer;
height:107px;
left:573px; // this seems that the dash-line is caused by the margin on the left.
position:absolute;
top:17px;
width:310px;
}

When the user clicks the text Test, the user will trigger a.php. Here is the problem, when I click the link without releasing my mouse in firefox, I can see a dash-line across the left.

Please see the screenshot http://i56.tinypic.com/w8kpiw.png I cannot figure out why? and how to fix it?

Anyone can help?

this seems that the dash-line is caused by the margin on the left because if I increase the value of left, I can see the dash-line expanded. So is there a fix for this problem?

Thank you

Answer 1

Try css on the a tag

outline: none

http://www.w3schools.com/css/pr_outline.asp

Answer 2

The "dash-line" you are referring to is the focus border that indicates which element has the focus. It usually appears on links and not on divs, so you should look at the CSS for your link. It's size is the same as the bounding box of the element, so try adjusting the position/size of the link.