Remove annoying rectangle in the latest Firefox build
The negative text indent image replacement technique (a.k.a. the Phark image replacement) is very popular and widely used in many modern (i.e. accessible) designs.
There’s, however, this annoying rectangle, which is in Firefox 1.5 now expanded all the way to the left (usually it’s 9999 pixels to the left). The rectangle is ugly, and while we’re waiting for Firefox developers to fix it (report Firefox bugs), here’s a quick and dirty solution:
var remove_rectangle = function() {
var lnks = document.links;
if (lnks) {
for (var i = 0; i < lnks.length; i++) {
lnks[i].onmousedown = function() {
this.blur();
return false;
}
}
}
}
window.onload = function() {
remove_rectangle();
// the rest of your onload functions
}
Unfortunately, we can’t remove the rectangle completely, because focus() functionality is necessary for browsing with a keyboard.
Speaking of which, do you always define :focus and :active pseudo-classes or do you sometimes forget about them?
~ Already 5 comments · Sorry, comments are off ~
5 Comments
I define :active so I don’t get any surprises. I don’t bother with :focus because the default highlighting of the browser is usually fine.
Comment (#) by Gabriel Mihalache — 3rd December 2005.
I had the same problem, fixed it by adding
line-height: 0; font-size: 0;to the CSS. That worked for me. Not sure though if that has some drawbacks.Another problem (at least I have it) arises from the fact that the rectangle is now dran outside the element—what gave me horizontal scrollbars when I had some links placed to the right boundary of the browser window, viewport… whatever you call it. I “fixed” it by giving the links some room, but that’s not the most elegant solution.
Comment (#) by Julian — 3rd December 2005.
I use the Shea Image Replacement 90% of the time, because when you hide images but leave CSS on, no text appears where the images were.
I rarely use :focus or :active, as they’re often unnoticeable and thus pointless. There is the occasion where they’re useful, but typically the best indicator is :hover, which is why it’s used most often. Then again, for keyboard-only users, I suppose they’d never see what :hover looks like, so I should probably start using :active.
Comment (#) by Jonathan Fenocchi — 3rd December 2005.
Easier solution: Use overflow:hidden; on the offending element.
Comment (#) by James AkaXakA — 5th December 2005.
thank you! this entry and its comments helps me a lot! :)
Comment (#) by tommy — 30th December 2005.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.