If you are a web developer then you surely know what is an image replacement technique and what that means. One of the most common CSS techniques is the Phark Method, a very good and simple method.
Although this is very used, I noticed developers tend to skip fixing Firefox appearance of a dotted border that goes to the edge of the screen. In this tutorial I will show you how this can be fixed in a simple way.
First let’s see how Phark Method looks:
<a href="#" class="replacement">dotted border</a>and the CSS:
a.replacement {
background: url(dotted-border.png) no-repeat;
height: 44px;
width: 316px;
display: block;
text-indent: -9999px;
}The reason why the outline border goes to the edge is because of the text-indent value: -9999px. If the value is negative the text will be indented to the left and Firefox users will notice a dotted border that goes to the left edge of the screen.
There are two simple methods I know to fix this:
First method: use overflow
This is a fix I use frequently and it’s most recommended.
a.replacement {
background: url(dotted-border.png) no-repeat;
height: 44px;
width: 316px;
display: block;
text-indent: -9999px;
overflow: hidden; /*Add this line to the image replacement method*/
}Second method: use outline
This also fixes the problem but this can cause problems(you will not see the selection) when tabbing (if accessibility is an important factor for you).
a.replacement
{
background: url(dotted-border.png) no-repeat;
height: 44px;
width: 316px;
display: block;
text-indent: -9999px;
outline: none; /*Add this line to the image replacement method*/
}Conclusion
At first sight this doesn’t seems to be a very important problem, doesn’t affect the HTML layout but when you are developing a website you want to be close to perfection (at least you should try it :)) so I hope this will help you when encountering this kind of behavior.
Bellow you have a live demo with this outline example, please feel free to comment about it or about other solutions you’ve found!