Mobile Friendly Website


Doing it with style

nDLRt tutorial 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


Thank you ever so much for the detailed tutorial. I am sure I am not alone in my appreciation of your efforts. These examples work nicely in all Windows browsers I tried, and, naturally, in Firefox 1.5 on a Mac. The other Mac choices are less cooperative.

Safari 1.3.x never shows dotted line boxes for links. In Apple's world, accessibility takes a back seat to aesthetics. Strangely, Safari does not preserve the active state after the mouse button is released. There is no way of showing which button is active with this method.

IE 5.2 is better behaved in this regard. Active and hover states work flawlessly. The boxes (solid line for Mac IE rather than dotted) are always there, however. Another oddity is that the Information section below the Google ads only shows one column. I do not know what triggers this behavior on certain pages of your site but not others. For example, the home page, the Olympic rings, and puzzling CSS all display two columns of Information text rahter than a single long one. Likewise the page opened by clicking on the "Menus" tab in your header displays two columns of info text, but the "Demos" and "Layouts" index pages only show one.
(22.01.2006, 00:21)

Mary, the column problem is probably due to the way IE fails to get the width right with italic text. These particular pages have highlighted italic text which I have styled to work in IE6 but it looks as though IE5.2 fails to get it right. Glad you liked the detailed info on 'dotted line replacement'.
(22.01.2006, 09:27)

Stu, though everything appears as it should in IE6, when using Firefox version Deer Park alpha 2 (latest nightly build) the dotted border is always visible, including in the "active/focus image replacement" demo page. I also tried in safe mode to be sure. What is the origin of this issue according to you ?
Good job - as usual - anyway ;-)
(28.01.2006, 19:46)

Benoit, if this is the case then I would say that Firefox Deer Park alpha 2 is wrong to do this. The basis of this method is that the actual link (which carries the dotted border) is reduced to zero size so no border is visible. The containing element is given a position:absolute which takes it out of the normal flow of the document and hence have no link associated border. This is certainly the case with FF v1.5, IE, Netscape, Mozilla and Safari.
(28.01.2006, 21:09)

Stu, everything is ok using FF v1.5 (WinXP), that's why i am surprised with the coming version...FYI i also gave a try to IE7 (beta1) and the dotted border NEVER shows...strange isnt'it ?
(29.01.2006, 11:05)

Benoit, is Deer Park alpha 2 the latest version of FF? I thought the latest was just 1.6a1
(29.01.2006, 11:22)

Benoit, also IE has a problem with the dotted border. With mouse clicks sometimes it shows and sometimes it doesnt. However if you use tabbing to navigate, it will show.
(29.01.2006, 11:24)

Stu, thanks for the tip for IE, it also works for IE7. And Deer Park alpha 2 is the actual name for 1.6a1 ;-)
(29.01.2006, 12:57)

Benoit, strange name for a 1.6 alpha 1 ??? I thought that Deer Park alpha 2 for a fore runner of 1.5
(29.01.2006, 13:32)

Stu, i agree with you, the name is badly chosen, but i remember that this is due to a change in their roadmap, and v1.5 is in reality v1.1 with more features as expected...Well, let's suppose that DP alpha1 was a pre1.1/1.1 and DP alpha2 is a pre 1.6/2.0
(read this one, a few days after yours ;-) : some headache)
(29.01.2006, 14:42)

Benoit, as clear as mud lol ;o)
(29.01.2006, 15:36)

Benoit, FF understands outline:0; and it is valid css so that should fix it if necessary. I have added this to the css for this demo so maybe you could check if it is now ok.
(29.01.2006, 16:33)

Stu, you're the best ;-) it works fine now.
(29.01.2006, 20:37)

Benoit, cheers, thanks for the feedback. If the next official Firefox version has the same 'feature' then I now know how to deal with it.
(29.01.2006, 21:33)

I want to use your naviagtion for IE6 but I've some problems. For example if you change the text between <em>Item one</em> into an image like <em><img src="testing.jpg"></em> it wount set the link by clicking on the image ...

Like your work but if you could help me it would be much more nice .. ;)

(16.05.2006, 17:17)

I made a simple nav and used your remove dotted border tut, it works great :). I did notice though that, at least in my particular case, you dont need a:active zeroed to make the border disappear, but only a:focus. (This was tested in FX and IE6.)

Can you explain a bit what its about?
(08.08.2006, 20:46)

Miha, I think that you are referring to IE6 and :active state. Sometimes IE6 will not show the dotted borders when using the mouse. But if you try 'tabbing' through the links on your page you will see that the dotted borders are still there.
(08.08.2006, 22:19)


looks like pretty cool stuff.

just to let you know that all your pages are erroring. the one i looked at was in ndlrt.html line 620 call to urchinTracker();

urchinTracker does not seem to be defined.

keep up the good work.
(14.11.2006, 22:49)

metamind, not sure what program you are using to check errors but urchinTracker() is a call to the google analytics js which is an external js file. This tracks all visitors movement and information to enable me to get a better understanding of web page requirements.
As such this is not an error,
(14.11.2006, 22:57)

Junior barnackles:-
Just a quick question about making the colour stick. At step 4 where you have changed the box colour to blue after the link has been clicked, how do you keep the box blue even if you click elsewhere on the page. As it is when you click it, it goes blue but when you click the page itself, it goes back to black.


Junior barnackles
(05.12.2006, 22:31)

Junior barnackles, the color change is generated by the first mouse click (:active/:focus state) but when clicking again this :active/:focus state is lost and the color reverts back. The only way to make the color stick is to load a new page with the menu item styled as though it was :active.
(05.12.2006, 22:50)

Yeah your active/focus removal doesn't work fro image buttons? I copied the same code you have listed here and no there were no positive results. Quite disappointing. Don't know what you did on this page but doesn't transfer.
(06.03.2007, 21:50)

JD, this does work with images as can be seen on this demonstration
You will need a standards compliant doctype though.
(06.03.2007, 22:33)


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