Mobile Friendly Website


Doing it with style

No active/focus border 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

There is something much easier for this - the CSS "outline" property. For IE, it unfortunately banks on arbitrary JS called from within CSS. (begin declaration block example) a {outline:none; noOutline:expression(this.hideFocus=true);} (end declaration block example)
(22.02.2007, 19:31)

Here is what I did:

<style type="text/css">
p a { outline : 0; }

<!--[if IE]><style type="text/css">
p span { display : inline-block; overflow : hidden; vertical-align : middle; }
p a { display : block; margin : -1px; padding : 1px; }

The code for IE works from IE 5.5 to IE 7, it fails in IE 5. For other browsers it works flawlessly thanks to the outline CSS.
(26.02.2007, 03:18)

Note: you also probably want to add white-space : nowrap; for IE6 and 5.5 as they have some interesting ways to handle text within blocks when there isn't enough space.
(26.02.2007, 03:22)

(26.02.2007, 15:37)

habendorf, javascript not CSS.
(26.02.2007, 18:35)

Interestingly enough, it seems IE5.5 has some problems on this site hiding the focus rectangle when scrolled to certain positions, but it probably has more to do with the combination to other layout elements than the technique itself (like setting hasLayout on some parent element might fix it).
(26.02.2007, 23:39)

what about is the CSS property "outline" is not supported in IE5.0, IE5.5, IE6.0, Netscape6.0, Netscape7.0... is there a fix?
(05.03.2007, 21:03)

PXL, this method does not only use outline:none; it also uses an alternative that works in IE5.5, IE6 and I think Netscape.
(05.03.2007, 21:39)

I'm having trouble finding the code here. Can I get a link.

Much appreciated Stu =)
(05.03.2007, 22:29)

PXL, Just copy the source code. The styles are in the page <head> and the text is in the #info <div>
(05.03.2007, 22:56)

Would this work on image links as well?
(29.10.2007, 19:26)


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