Quick Firefox fix for dotted border on links

November 23, 2007 • 4 comments

When using the Phark -9999px method for image replacements you should use one of the fixes for the border outline in order to solve the border problem on your designs. However these fixes are not all that widely used. Here is a way to use either of these fixes across all the websites that you browse using Firefox user style sheets.

In order to make Firefox behave a certain way for all websites that you visit you have to either edit the default user style sheet or the Firefox config file.

Mac users: navigate to {user}/Library/Application Support/Firefox/Profiles/Chrome{your user profile}
PC users: navigate to C:\Program Files\Mozilla Firefox\defaults\profile\chrome

and open the file userContent-examples.css and add either one of the solutions into the CSS file and save as userContent.css
Disable the border:

a {
    outline: none;
}

Tidy up the border:

a {
    overflow: hidden;
}

There is also a way to get rid of the outline border by editing the Firefox config file (keep in mind this will remove the border completely)

1. Type “about:config” in Firefox’s location bar
2. Find the string: browser.display.focus_ring_width
3. Set the value to 0

Now Firefox will behave as you want across all websites you visit. Gotta love user based style sheets.

Tags: , , , 4 comments

Get rid of dotted border from links

November 22, 2007 • 51 comments

We’ve all seen how Firefox will add a dotted border on any links are clicked. When coupled with the Phark technique, Firefox extends that dotted border to include your extremely indented text. However there are three different solutions to this:

  1. Getting rid of the dotted border completely
  2. Stopping the border from stretching
  3. Editing the Firefox default user style sheet to do solution 1 or two for all websites you visit

The first solution will essentially turn of the border completely leaving no outline

a {
    outline: none;
}

before:
long dotted border around image

After:
no dotted outline on image

The second solution will keep the border nice and tidy with your image.

a {
    overflow: hidden;
}

Before:
long dotted border around image

After:
Tidy dotted outline border

Lastly if you’re annoyed by the border as much as I am, there are two ways to perform either one of these solutions using the Firefox user style sheet.

But we’ll save that for the next entry.

Tags: , , , 51 comments

Image Replacement using CSS

November 21, 2007 • 3 comments

Most web designers have all used one sort of image replacement technique somewhere. (This blog uses sIFR for the title) However the most common method for image replacement is the Revised Phark Method. This method still allows for semantic XHTML code and is accessible to screen readers.

The technique is quite simple, you use the text-indent CSS property and indent your text negatively so far off the screen it doesn’t show up. Designers have come to adopt -9999px or -9000px. This value insures that if you have a right aligned header and the site is being displayed on a large monitor, your text will still be pushed off screen.

Using this method you can put push your text off the screen and replace it with an image or logo and still have semantic and accessible XHTML. Of course you can also link it so that it returns to your home page as is generally practiced.

<h3 id="header">
	Company Name
</h3>

In the CSS you want to make sure that you define a width and height for the image, otherwise the element will colapse onto itself.

/* css */
#header {
	text-indent: -9999px;
	background: url(logo.gif);
        width: 300px:
	height: 25px;
	}

This code shows how you can replace an <h1> tag with an image, yet keeping the <h1> visible to screen readers and search engine robots. However Firefox creates slight problem with links. Theres a thin dotted outline around the tags. Ever since version 1.5 Firefox has started to include the -9999px indention, so the border goes to the far left of the screen at when the link is clicked.

In the next entry we’ll see how to get rid of the dotted line border on the links in Firefox.

Tags: , , 3 comments