Jump to content

dash line box around active links


george
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. Edited by george
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...