5

For some reason, exclusively on Windows machines, on the Sign in button on this page, I'm getting this odd fuzzy outline that's difficult to explain, so see for yourself:

http://zis.smartlyedu.com/login

It doesn't appear on Mac OS, but it does on Windows.

Has anyone encountered this before?

Here is the CSS for the button:

    div.input-submit input{
    outline:none;
    font-family:Helvetica, Arial, sans-serif;
    width:100px;
    height:35px;
    color:#fff;
    font-weight:normal;
    float:right;
    font-size:18px;
    text-shadow:#000 1px 1px 1px;
    border:1px solid #fff;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -ms-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2)));
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
    background-color:#31639d;
    font-weight:bold;
    border:1px solid #fff
    }
Alain Meier
  • 65
  • 5
  • What browsers? Is the problem fixed after applying `outline:none;` (CSS) on the button? – Rob W Sep 24 '11 at 14:20
  • @Rob W, he said IE. Alain, can you post a screenshot for those of us without IE. – Jason McCreary Sep 24 '11 at 14:24
  • It happens to me on Chrome, FF and IE9. I already have outline:none; on it, it's not the issue unfortunately – Alain Meier Sep 24 '11 at 14:25
  • @JasonMcCreary it actually occurs on any windows browser (main one, at least). But it doesn't happen on any mac browser. If you go to the page, do you not see the sort of fuzzy outline? (If you're on windows) Edit: It appears most visibly on Chrome, though. Oddly enough, if you zoom in a few times using the browser zoom, the fuzziness disappears. – Alain Meier Sep 24 '11 at 14:26
  • @JasonMcCreary `Windows != MSIE`. Alain, add `display:none` to the input element, to confirm that the outline is originating from the input element. After confirming, disable all CSS attributes of the shown CSS, and add them separately. – Rob W Sep 24 '11 at 14:29
  • @RobW Thanks, I tried your method and I found out that the issue was with the 1px border and the 20px border-radius. Apparently on Windows it freaks out if they're used at the same time on a submit button. To fix it, all I did was remove the borders and replace it with border: none;. If I removed the border-radius it would work fine, too. Thanks for the help! – Alain Meier Sep 24 '11 at 14:39
  • @Rob W, post your comment as an answer so it can be marked and available for future visitors. – Jason McCreary Sep 24 '11 at 15:02

1 Answers1

1

This solution has been found through comments at the original post.

Alain, add display:none to the input element to confirm that the outline is originating from the input element. If you're sure about the origin's cause, disable all CSS attributes of the selectors which match your element, and add them back individually. This way, you will be able to find the cause of your CSS issue.

Jason McCreary responded:

Thanks, I tried your method and I found out that the issue was with the 1px border and the 20px border-radius. Apparently on Windows it freaks out if they're used at the same time on a submit button. To fix it, all I did was remove the borders and replace it with border: none;. If I removed the border-radius it would work fine, too. Thanks for the help!

Rob W
  • 341,306
  • 83
  • 791
  • 678