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 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)

10 of 35 comments (part 1). [ » ] [ * ]


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