Quick Firefox fix for dotted border on links

November 23, 2007 • 5 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: , , , 5 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

AIR Houston 2007 meets Kids Meals Houston

November 3, 2007 • 1 comment

Today was Go day. 8 hours and one incredibly accessible website.

About a month or so ago the TopSpot crew got commissioned to participate in the AIR Houston competition. The competition consisted of creating a fully accessible website for a non-profit organization in 8 hours. Our NPO was Kids Meals Houston. Essentially they are like Meals on Wheels but focus on local Harris County children that live in poverty and are hungry. These kids know what it means to be hungry and Kids Meals provides them with lunches on a daily bases. Our NPO representative Ruth, was just amazing. She provided us with everything we needed to build the site as well as moral support day of the competition. She came with Pom-Poms… yes Pom-Poms and it was really great to see her so excited about the website.
Read more

Tags: , , , , , 1 comment

A List Of Things NOT To Do On Your Website

October 26, 2007 • 4 comments

OK AOL kiddies and other high school webmasters… today’s lesson in Webmastering 101 class is a list of things NOT to do on your website.

Everything on this list is obvious yet I see it happen all the time. Most of what’s on this list, everyone already knows, however people STILL feel it absolutely necessary to do. This is simply a list of things you should not do on a website. Period.

Splash pages. If I have to choose high or low bandwidth before entering your website you’ve failed. This is 2007. There is no need for splash pages anymore… personally I don’t think there ever was. From an SEO standpoint having a splash page can be very hurtful towards your rankings. Search engine spiders will index your splash page instead of your home page and usually a splash page consist of flash or some other form of media such as a picture. The only actual text content on a traditional splash page is the “skip intro” link. Users with dial up or even slow broadband will become frustrated after waiting for your page to load up only to find its a splash page and no actual content is on there. You want to make it easy as possible for users to navigate your website, and you want them to do as little work as possible. Having them wait for a splash page and then click “continue” goes against this principle.
Read more

Tags: , , , , 4 comments