1

I am not able to get rid of dotted outline in IE7+. I have added outline:none; border:none but still it is not working in any version of IE.

I have created fiddle, it works fine when I run the fiddle age in IE but when I paste the same code in HTML page then it is not working. Here is the fiddle http://jsfiddle.net/6Ayek/4/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photos Tab</title>
<style type="text/css">
/* Generated by F12 developer tools. This might not be an accurate representation of the original source file */
#contentContainer { BACKGROUND-IMAGE: url(/s/store/-1/common/gb/Media-Console/popup_bg.jpg); WIDTH: 636px; HEIGHT: 460px; OVERFLOW: auto}
#leftNavigation {   PADDING-LEFT: 15px; WIDTH: 125px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; FLOAT: left; FONT-SIZE: 12px}
#leftNavigation ul {PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
#leftNavigation ul li { WIDTH: 125px; DISPLAY: block;  outline:none !important;}
#leftNavigation ul li a {LINE-HEIGHT: 30px;  DISPLAY: block; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #2c2f30; FONT-SIZE: 12px;; TEXT-DECORATION: none; outline:none !important;}
#leftNavigation ul li a:visited {   COLOR: #2c2f30; outline:none !important; border:none}
#leftNavigation ul li a:hover { COLOR: #000000;  outline:none !important; border:none}
.currentSelection { BORDER-BOTTOM: #0076a3 1px solid; BORDER-LEFT: #0076a3 1px solid; LINE-HEIGHT: 25px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; PADDING-LEFT: 10px; OUTLINE-WIDTH: medium; DISPLAY: inline-block; BACKGROUND: #0095cd; BORDER-TOP: #0076a3 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #0076a3 1px solid; TEXT-DECORATION: none; BEHAVIOR: url('/s/store/-1/common/gb/Media-Console/PIE.htc'); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}   
</style>
 </head>    
<body>
<div id="leftNavigation">
    <ul>
    <li><a href="#" style="color: white; " class="currentSelection">test</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    </ul>
</div>
</body> 
</html>
1
  • Do NOT remove the visual focus indicator, your users need it! 1- example: I want confirmation that I clicked somewhere and when going back from which link I was coming. 2-accessibility related, please read WCAG 2.0 F78 Failure Technique, C15 and SCR31 related to what you shouldn't achieve.
    – FelipeAls
    Oct 5, 2012 at 8:44

3 Answers 3

3

You only need one short CSS rule for this:

a { outline: none }

Why it’s not working in your HTML page is impossible to answer, but this is the correct CSS code for removing outlines.

I should mention that this technique is not very accessibility-friendly, since the dotted borders are helpful for people that navigates through keyboard or other instruments. A better approach would be this jQuery snippet:

(function($) {
    $(document).on('mousedown mouseup', 'a', function(e) {
        if ('hideFocus' in this) { // IE
            this.hideFocus = e.type == 'mousedown';
        }
        this.blur();
    });
}(jQuery));

UPDATE

I misread the IE7 part of your question... You can try adding:

a:focus{
    noFocusLine: expression(this.onFocus=this.blur());
}

But the best solution would still be the jQuery/javascript approach.

3
  • As i have mentioned in question I have already used outline and border property but still it is not working in html page but works in fiddle page
    – Sowmya
    Oct 5, 2012 at 7:39
  • There is no way I can debug your HTML page, I can only see the code you post here. The CSS you authored looks messy, I suspect there is some validation issue. You can try to validate your code first and see if it helps. Oct 5, 2012 at 7:41
  • Check my updated question. code is even w3c valid, there are no issue in code. I dnt think css looks messy coz there are only few lines. Can u pls copy the entire code in html page and run in ie then you can see that outline
    – Sowmya
    Oct 5, 2012 at 7:46
1

Support to the outline property was added in IE 8, so the technique does not work on IE 7. On newer versions, it does; your code, when tested on IE 9, works both in IE 9 mode and in IE 8 mode. (With “works” defined as “produces the desired usability problem”.)

To achieve the desired effect on IE 7, you can use the proprietary HTML attribute hidefocus, e.g.

<li><a href="#" style="color: black; " hidefocus>test 2</a></li>

or set the corresponding DOM property hideFocus in JavaScript.

0

If you can use javascript on your page, try this, is working for me on IE9 and FF15:

    <script type="text/javascript">

        if (document.documentElement.attachEvent)
            document.documentElement.attachEvent('onmousedown', function(){event.srcElement.hideFocus=true});

    </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.