CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Mo.
Mo.

Reputation: 27455

How to remove dotted border around the link in IE7

There is border around button and link when click.

enter image description here

enter image description here

How can I remove it?

Upvotes: 22

Views: 31688

Answers (13)

Lars Angelo Trab
Lars Angelo Trab

Reputation: 1

This is all around code to remove outerline and put in your your CSS under the desired class name (className in IE). Example for <a> tags

a{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
}

Example for all tags in your html page!

*{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
}

Example for a tag with class myClassName in your html page!

.myClassName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
}

Example for a tag with id myidName in your html page!

#myidName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
}

Works in major browsers and if not they are so old so the chance of how many people there still are using this old browsers!

Notes: outline:none 0; does also work in newer browsers but not in all. But outline:0; is universal and in those browsers there don´t understand 'none' and you get there's default value, but 0 understand in all browsers there are using outline:.

And you need this for IE7: _noFocusLine:expression(this.hideFocus=true);

or use JavaScript for the rest!

window.document.getElementById("myidName").blur();
window.document.getElementById("myidName").hideFocus=true;
window.document.getElementById("myidName").style.outline=0;

or

Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;

or with check if element exist:

if (window.document.getElementById("myidName")){
    Obj=window.document.getElementById("myidName");
    Obj.blur();
    Obj.hideFocus=true;
    Obj.style.outline=0;
}

JavaScript can do the trick for IE6 and IE7 and other CSS can't.

Upvotes: 0

Mahadeva Prasad
Mahadeva Prasad

Reputation: 709

Try this one

a:hover, a:active, a:focus {
  outline: 0;
 }

Upvotes: 14

maindola
maindola

Reputation: 53

a:link{ outline-style: none; }`

Upvotes: 3

Vojta Jemelka
Vojta Jemelka

Reputation: 136

CSS outline is not supported in IE7. That "browser" requires the following CSS expression: 

a {
    _noFocusLine: expression(this.hideFocus=true); 
}

It works also in newer versions.

Upvotes: 5

Andrew
Andrew

Reputation: 221

Apply this rule to the input 

input { outline : none ; }

Upvotes: 2

PravinS
PravinS

Reputation: 2584

This will also work

    a 
    {
        outline-style:none;
    }

Upvotes: 3

pwavg
pwavg

Reputation: 295

This would do the trick

a {
   outline:0;
}

Upvotes: 3

darma
darma

Reputation: 4747

You can preset it like that :

:focus{
    outline:0; /*removes the dotted border*/
}

But remember (for accessibility reasons) to set the style "later" in your CSS file to something more visible. For example :

a:focus, a:active{
    color:#ff5500; /*different color than regular*/
}
input[type=submit]:focus, input[type=submit]:active{
    background-color:#444; /*different color than regular*/
}

Upvotes: 48

Chris
Chris

Reputation: 26878

To start with, I can see one of your tags is IE7-bug, while this is actually more like a feature. The purpose of having this dotted outline is for users to be able to navigate between various controls using their mousewheel or the tab key.

In any case, to define the style of an element when it's "focused" use the CSS :focus selector. The property that styles this outline is, trivially, outline; outline: 0 will prevent the focus outline from appearing.

Note: You might want to apply that rule only on your button, and not on all elements, because some users might be used to seeing something to indicate focus, which makes it easier to navigate using the methods mentioned above.

Hope that helped in any manner.

Upvotes: 6

NewUser
NewUser

Reputation: 13333

Try 

a {
     outline: none;
}

Always try to use css reset.This will help you to solve the problem like this.I use eric mayer css reset tool.

Upvotes: 2

William
William

Reputation: 413

Try setting the outline property:

a {
   outline: 0;
}

Upvotes: 2

Karl Laurentius Roos
Karl Laurentius Roos

Reputation: 4399

It's ugly, but so are most IE fixes.

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

Upvotes: 6

Zendy
Zendy

Reputation: 1684

You can do it with this code:

   a:focus{
      border: none;
    }

Upvotes: -10

Related Questions