How do you remove the dotted outline that appears on mouse click in Maxthon, IE7, and IE6?

Question

The dotted outline that I want to remove appears on mouseclick when the page at http://sandbox.scriptiny.com/tinydropdown2/# is viewed  in Maxthon, IE7, and IE6.  The dotted outline is black.  It remains in place, highlighting the most recently selected item on the dropdown menu, until the viewer clicks the mouse elsewhere on the page.

I've tried using "hidefocus" toremove the dotted outline but found that the dropdown menu no longer functions properly when I add a "hidefocus" property.  A solution that involves simply adding the correct *css properties to the *css file would be great...  Thanks for your help!

Answer 1

Try

<style type="text/css">
a{outline-style:none}
</style>

Comments

I've tried your suggestion but it doesn't seem work.  Thanks anyway --  Any other ideas?

Answer 2

I was able to solve this problem.

I used a slight variation on the code that Jeff Starr offered at http://perishablepress.com/press/2008/12/16/unobtrusive-javascript-remove-link-focus-dotted-border-outlines/under the heading, “2. Advanced Method”

The method was provided earlier by Mike at http://www.mikesmullin.com/?p=23.

I pasted the following code into my *html file:

<script type="text/javascript">

var runOnLoad = new Array();

window.onload = function() {

            for(var i = 0; i < runOnLoad.length; i++) runOnLoad[i]()

}

if(document.getElementsByTagName)

for(var i in a = document.getElementsByTagName('a')) {

            a[i].onmousedown = function() {

                        this.blur();                 // most browsers

                        this.hideFocus = true;       // internet explorer

                        this.style.outline = 'none'; // mozilla

            }  

            a[i].onmouseup = function() {

                        this.blur();                 // most browsers

                        this.hideFocus = false;      // internet explorer   

                        this.style.outline = null;   // mozilla

            }

}

</script>

My *html file calls images that need to swap with each onmouseover and onmouseout event.

The following line prevents the swap with each onmouseout event:

a[i].onmouseout = a[i].onmouseup = function() {

I replaced this line with the following line:

a[i].onmouseup = function() { 

So far, I haven’t noticed any problem resulting from this change, and the unwanted dotted outlines that were previously visible in Maxthon, IE7, and IE6 are now not visible.

Hope this info helps somebody out --