dash line box around active links

[george]

Is there a way to prevent or undo the little dashed line box that appears around a selected link? See my problem example page, click a tab, and you will see the little dashed box. I have tried removing this by adding a

 document.getElementById(objId).blur();

to my "SeeClick" event handeler, but that does no good. I also tried adding the same blur() method to an onmousemove event on the link tab, but this did not help either. Seems to me I must catch the onFocus event when it actually happens, then issue the blur() method. But how do I do this? Or, is this even the right approach to take? If you have a solution to the verticle space below the tabs that would be great too. I posted this problem in the CSS forum a few days ago, but have not found a working solution yet. Thanks.

[jeffman]

In the CSS definition of your active link, add outline:none

[george]

Thanks, But if you look at my problem example page, you will see that it did not solve the problem. The CSS and Javacript are all in the HTML for your convience. Perhaps the way I tried to implement the solution is wrong. I used:

#tabBox .current a:active { 	outline:none;	}

Where #tabBox is a div container, and .current is the class for the links there.

[dsonesuk]

try targeting the anchor only for all states link, hover etc#tabBox a { outline:none; }

[george]

I have just changed this to fit your suggestion above, and it does not resolve the issue. I believe we have tried all the CSS approaches we are aware of, and they have not been effective. I really think this needs to be resolved using JavaScript using somekind of document onload event listener that continually scans for all document events, so I can then catch the focus event at as it happens for particular a object and then counter that with the blur() method for that object. I do not know how to code an event listener in JavaScript that will run as long as the document is active, but I know it can be done. Thanks

[dsonesuk]

which browser are you using that this is not working for? FF, IE seems to work fine for me

[george]

which browser are you using that this is not working for? FF, IE seems to work fine for me

Sorry I hadn't noticed that it works in FF. But my IE (good ole ie) Ver 8 still shows the dashed box when you click the tab.

[ShadowMage]

Sorry I hadn't noticed that it works in FF. But my IE (good ole ie) Ver 8 still shows the dashed box when you click the tab.

Hmm...I just did some testing and for links, it removes the box in both FF and IE, but with inputs (specifically buttons, I didn't test any others) it works in IE but not in FF........ Perhaps outline isn't a very well supported attribute?

[george]

Problem solved! I didn't have an id in my <a tag for my javascript to reference. Gave all my links an id, and my javascript worked like a champ. Now, no more dashed box around my links in IE and FF. A second set of eyes looking at my code may have noticed this. It took my old eyes five days to figure it out.

[dsonesuk]

if you want to assign id automatically, and caluclate the total of tabs, try this<script type="text/javascript"><!--// function seeClick(objId) { tabcontainer = document.getElementById("tabBox");tabtotal = tabcontainer.getElementsByTagName('li').length; for ( i=0; i<tabtotal; i++) { document.getElementsByTagName('li').className="norm"; } document.getElementById(objId).className="current"; document.getElementById(objId).blur(); }function init_tabid(){tabcontainer = document.getElementById("tabBox");tabtotal = tabcontainer.getElementsByTagName('li').length; for ( i=0; i<tabtotal; i++) { document.getElementsByTagName('li').setAttribute('id','tabid'+i); } }window.onload=init_tabid;//--></script>

[george]

Thanks dsonesuk, I can learn from that, and use it to create reuseable code!!