CODEWITHSUNDEEP
htmlcsswindowsgoogle-chromeubuntu
user1922137
user1922137

Reputation:

Different CSS result of Google Chrome in Windows and Ubuntu

I have used a div tag in my code:

<a href="#"><div class="field btn half green" id="register-btn">ثبت نام</div></a>

And the CSS code for this tag is:

.field {
    position: absolute;
    width: 205px;
    left: 22px;
    color: #eaeaea;
}

.btn {
    height: 35px;
    padding-top: 10px;
    cursor: default;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    font-size: 26px;
}

.half {
    width: 101px;
}

#register-btn {
    right:22px;
}

But the result is very different in Google Chrome on Windows and Ubuntu (There is an extra padding on Windows). How can I fix that problem?

enter image description here

Upvotes: 0

Views: 914

Answers (1)

Martin Capodici
Martin Capodici

Reputation: 1514

Try using line-height instead of padding.

.btn {
    line-height:40px;
...
}

http://jsfiddle.net/Ljnufjs1/

Not only will this fix the problem, but it is a better fit for what you are trying to achieve than padding.

I am not sure why padding doesn't work, but it may be because the text isn't a block element so gets treated differently.

Upvotes: 1

Related Questions