I’m sure you have noticed that when you click a hyper link, and especially a linked image, a dotted border appears around it. Have a look at CSSplay for more examples and proper CSS code fix related to this.

A few quick solutions

For those of us using the jQuery Java framework the “solution” is incredibly simple. Just call the following function in your header and all dotted borders are gone:

jQuery("a").focus(function(){this.blur()});

Using CSS it’s almost as simple (at least for all browsers except IE):

a:focus {outline-style: none;} 

Using basic JavaScript the following should do the trick:

for(var i=0;elm=document.links[i];i++)
{
elm.onfocus=function(){elm.blur();};
}

Some would probably say that this shouldn’t be done because the active/focus dotted border is there to show visitors who are using tabbed link selection which link is selected. But when we are using CSS we can style our own active/focus state and in this case the dotted border is not so necessary. I’ll appreciate your take on this as I’ve debated this “issue” with some of my clients on several occasions.

I know this isn’t a new trick but I’ll post it anyway for my own records, and anyone else that may find it useful. As shown below you can add a few lines of code to your stylesheet(s) and get round corners on almost any style element that supports borders.

CSS rounded corners code

.corners {
	-moz-border-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

As you can see the first line is specifically for Firefox, the next 4 for Safari/Chrome and the last 4 for any browser that fully supports CSS3.

It’s common knowledge that a lot of (most) web/graphic designers uses a Mac. Consequently, they tend to use Mac fonts in their style sheets as their first options (at least quite often). Unfortunately fonts like Lucida Grande, Lucida sans etc. are NOT included in the normal Windows package.

Well know you can get it too! After a bit of googeling I finally found the best emulations of all the OS X system fonts. If you just want to get the emulated Mac Lucida fonts go here.

Later this year Microsoft will release a public version of their next browser. Compared to previous versions Internet Explorer 8 will by default be set to follow web standards rather than “MS standards”. This will create the need for yet another IE fix concerning styling and layout.

The following support article from Microsoft explains how you can add a little code to the file header to keep the old behavior (emulate IE7). You can off course also assume that IE8 will behave like Opera, Safari and Firefox and just keep the rules for older IE versions (I think I prefer the latter if it turns out okay).

You can download and test IE8 Beta here.

Fingers crossed

First let me emphasise that I’m not a big fan of making up different styling rules for the various browsers. But in some (most) cases it’s an absolute necessity.

Before I continue I’d like to mention Dean Edwards IE7 JavaScript library which makes Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. That saves you the hassle of making tons of IE specific style sheets and embedding them using these conditional comments (bottom of page).

So with IE out of the way there’s still a few Opera and Safari “bugs” that may need attention. Instead of relying on JavaScript, which will be ignored by some browsers or users that have disabled Java, you may try this PHP approach that I successfully implemented on one of my sites today.