Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fuzzy outline on a form button when using a background image with a 20px border-radius

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
    }
like image 585
Alain Meier Avatar asked Nov 14 '22 16:11

Alain Meier


1 Answers

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!

like image 146
Rob W Avatar answered Nov 17 '22 06:11

Rob W