Page 1 of 1

@ breaks focus on IE when typed in an input.

Posted: Tue Feb 03, 2009 6:47 pm
by lovelf
Hello, I had set a CSS rule to remove the dotted border around elements onfocus, * :focus {outline: none;}

When I type an "@" in a input in IE then the CSS rule stops working, why ?

Code: Select all

* :focus {outline: none;}
<input class="class" type="text" name="name" size="20" maxlength="140">

Re: @ breaks focus on IE when typed in an input.

Posted: Wed Feb 04, 2009 7:11 pm
by JAB Creations
IE what? A "stable" version or IE8?

Comment out any JavaScript you have on the page and test it again.

Additionally the two lines of code you've posted is exceptionally insufficient for anything beyond what I have suggested.

Re: @ breaks focus on IE when typed in an input.

Posted: Sun Feb 08, 2009 6:40 pm
by lovelf
Hello, when an @ gets typed into the input the link gets the outline when clicked. It happens to IE7 and IE8, it does not happen to IE6 because focus outline none can only be achieved with Javascript for IE6 so it is not an issue for that MSIE version.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>Example</title>
<style type="text/css">* :focus {outline: none;}</style>
</head>
<body>
<a href="http://www.example.com">just a link that will have a border outline after an @ gets typed into the input, only in Microsoft Internet Explorer, versions 7 and 8, in 6 focus outlines gets only achieved with Javascript and this is not an issue</a><br>
<input class="class" type="text" name="name" size="20" maxlength="140">
</body>
</html>
OK, I found the problem, I was making the @ pressing alt+64, if you press the alt key IE will display a menu, then the outline appears.