CODEWITHSUNDEEP
htmlcsssafari
Ryan
Ryan

Reputation: 1164

Safari CSS Compatibility Issue

So, I am writing some CSS that supports all browsers, and I am testing it on IE, Chrome, Opera, Safari and Firefox. The following CSS positions the #signinForm in the center of the page on all browsers, other than Safari.

#signinForm {
    position: absolute;
    -webkit-position: absolute;
    width: 400px;
    height: 320px;
    left: calc(50% - 200px);
    top: calc(50% - 160px);
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}

What would I have to add to my code to get the CSS to position the #signinForm in the center on a Safari window?

Upvotes: 0

Views: 128

Answers (1)

SkelDave
SkelDave

Reputation: 1186

You can use:

#signinForm {
    position: absolute;
    width: 400px;
    height: 320px;
    left: 50%;
    margin-left: -400px; /*  minus the width of the div */
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}

Upvotes: 1

Related Questions