Mobile Friendly Website


Doing it with style

active/focus borders COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

this is the end of civilization as we know it!
(22.11.2005, 06:23)

Perhaps the beginning of a better one? Where active/focus states can be css defined instead of boring dots ;o)
(22.11.2005, 09:11)

I don't really see the big deal here. You can turn off the focusring in Mozilla using the -moz-outline property (see StyleGala's css near the top). Opera doesn't even show a focusring at all. Internet Explorer is another matter though, I suppose this method could be useful for that.

Active and focus states for links isn't exactly something new...the focusring is the browser's default behaviour for indicating that a link is being interacted with, I don't really see why you should change that.

I know I may sound a bit scathing, but I'm just failing to see the idea behind this.
(22.11.2005, 14:46)

Dylan, you can turn it off in mozilla but this doesn't rely upon you doing that. This is just a method of changing the look of the active/focus default state. If your link produces a pop-up window for instance then it will have the default dotted border on screen whilst it remains active. You could style this to remove the active border altogether or to make it look in keeping with your layout. After all we style the :hover status to remove the default underline etc. so why not the :active/:focus status without the default dotted border.
(22.11.2005, 15:11)

Stu, the image swapping and nifty three state button are wonderful. This is one of my favorites of your menus. Addressing the point of whether this is a good thing -- I am all in favor. The browser focus remains obvious, and the look is clean as can be. At least it is on Windows. On a Mac, Safari does not show borders for any items, while IE 5 always has borders. The first example, however, is a distinct improvement on default IE behavior. The border expands to encompass the entire button area rather than just the text. The image swap works on all browsers, as does the triple button.
(23.11.2005, 00:12)

It is pretty sad the above comments on IE behavior, if you know how to use your computer, you never see the dots in IE on Win2k or xp.
(23.11.2005, 09:12)

UNLESS, it depends on the site's cpu activity the js causes, see moo.fx and the prototype junk, not to mention the ALA freakish obsession with lists and idiotic image css for hover states, which causes way too much cpu time to render simple simple old school html states.
(23.11.2005, 09:22)

'UNLESS, it depends on the site's cpu activity the js causes' - what js?
(23.11.2005, 09:55)

Ah, the loss of innocence.
(24.11.2005, 05:39)

gmn17, ;o) real knowledge is to know the extent of ones ignorance.
(24.11.2005, 09:11)

keep up the good work!
(27.11.2005, 06:53)


just happened to come across, very nice.
(27.11.2005, 07:12)

nice, but the header or footer should be constant, and wordpress is kind of weak, it still is a nice style site, kind of freakish about 4 spaces for tabs though...
(27.11.2005, 08:36)

Sorry! just looked at it in IE
must be a movable type, wordpress etc... thing, seriously, if you use that stuff, don't comment on standards
(01.12.2005, 06:26)

Its the wonderfull effect of using absolute positioning in a relative box. Nice work as always stu!
(12.12.2005, 12:28)

..and reducing the <a href= ..> to zero size ;-)
(12.12.2005, 22:12)

Stu, this relates a lot to what I've been working on recently. I'm confident you'll grasp the concept right away --
(11.01.2006, 19:55)

Drew, an interesting and very detailed piece of work, congratulations. It's a pity that javascript has to be used to generate the html/css as this can be turned off. I would much rather see php as the generator. Hope it gets some recognition.
(11.01.2006, 20:49)

I used PHP previously. As mentioned, the output was 71k. I have yet to determine if that *actually* affects page load time - that's next up on my to-do list, real world testing with a 56k, script language vs script language :)

I'm collaborating with a friend in an attempt to write a Java or online app that would scan a monochrome image and generate such a map. Could turn into something popular.
(11.01.2006, 21:23)

Yeah, man! You ROK!
(31.03.2006, 16:07)

Hey! Stu your are great. Thanks man and love ur work.
(11.04.2006, 18:42)

I'd been wondering about this for a while. I found a way to do it for the Windows Explorer, but now I can put it in my web pages (well, only in some cases where the dotted box really bothers me). Thanks!
(15.05.2006, 14:39)

Hi Stu, two things.

First off, you are amazing with CSS. Your site is filled with goodies that many people didn't know were possible :)

Secondly, I'm wanting to have the focus border NOT SHOW for regular links -- Fooled around with the code a bit last night, but I couldn't seem to get it. Any chance you could help me out?

I'm trying to get the focus border off of regular links, NOT in a UL list/LI. Thanks a ton!
(10.12.2006, 14:42)

Hi Ben, not possible for inline links as this method requires absolute positioned inner text in a relative positoned outer link and the size of the link needs to be specified.
Inline links do not have a width value and using position absolute without a width will just collapse the text so that it overlaps the rest of the line.
(10.12.2006, 15:15)

BTW it CAN be done using outline:0; /* for browsers that understand */
(10.12.2006, 15:16)

This is an excellent concept and i want to use it for navbar buttons instead of the javascript alternative.

But I've encountered a problem in Firefox - I need to click each button twice, once to trigger the 'on' state and once to actually fire the link. This does not happen in IE7 - one click is enough to do both. Any ideas why this might be?
(20.04.2007, 13:44)


I've had a look at the code and i really can't understand what is going on to achieve this result.

Could you spell it out for me.
(30.04.2007, 10:13)

Stu, another thing, I just came across:

outline-style: none;

Why isn't this sufficient?
(30.04.2007, 10:27)

Fahed, outline-style is not recognised by Internet Explorer.
(30.04.2007, 19:08)

Thanks Stu. Can anyone point out the JS way to do this? It would be interesting to compare against.
(30.04.2007, 19:15)

Hi -
Thanks so much for your great ideas! I've used a handful for different projects, and they have all worked very well.

I am using an adapted version of your image map tutorial on this site:, and there I am using the absolute positioned ems to separate the text from the image and make them both clickable links. Can the dots be removed in this case? As I am already using the absolute positioning for the purpose of separating the text, I can't work out how I could also incorporate the dot-removal principles here.. If you've got a sec, could you take a look under the hood?

Much obliged
(25.05.2007, 11:27)

/* Javascript method */

for(var i=0;elm=document.links[i];i++)
(16.06.2009, 15:08)

/* Jquery method */

(16.06.2009, 15:09)

How do I make a hyperlink underline longer than the length of the link? The 'active border' demo is similar to the effect I am after except the text does not change colour on mouseover, only the line colour.
(12.11.2009, 10:18)

Deepak Oberoi:-
I like CSS play. I have used it for many of my projects. Mostly for IE issues. It helps a lot. Thanks for this great website.

Deepak Oberoi
(09.12.2009, 17:47)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page