Quick Tip #1 – Image Replacement
Problem
Image replacement can be easily abused; but when used properly (like replacing logo text) it’s a great resource.
Image replacement without extra markup usually means setting text-indent:-9999px on your link. And this works great great. But in a lot of browsers it leaves a focus outline that runs way off the page to the left on click.
We need to keep the outline there for accessibility reasons, so most developers just leave it alone. But there’s a way to make, both, designers and accessibility gurus happy.
Problem CSS
#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
}Goal
Solution
By adding overflow:hidden to the link we can cut off the extended :focus outline.
Solution CSS
#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
}You can leave a response, or trackback from your own site.
« Twitter and the Downfall of Social Networking | 10 Tips to Create a More Usable Web »
|
Comments (6)
|
Leave a Reply
Thanks for the tip! That’s an annoying probem
I usually remove the outline all together, but I didn’t realize the accessibility reasons for keeping it. thanks for the tip
The web design company I work for puts their text in a tag inside the <a> and sets the to display:none.
That way you don’t have to ever worry about it showing. But either way works and I wonder what the pros and cons of each are..
That’s pretty common. I prefer this method because there’s no extra markup.
Keeps everything nice and semantic
i can’t see any difference between the two oulines viewing the demo with internet explorer. with firefox there’s the difference. but for all that – thanx for the tip
I have always been annoyed by this. I didn’t know that the solution was this simple. Good tip!