0

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

Improve this question
4
  • 1. For debugging purposes, please see if it still does it with English text and let us know. 2. Also please try line-height instead of padding to see if you can the desired layout that way. Commented Aug 29, 2014 at 0:22
  • @MartinCapodici - The problem persists even with an English input (using font-family: Arial) Commented Aug 29, 2014 at 0:24
  • 1
    Try the line height then e.g. see my jsfiddle here: jsfiddle.net/Ljnufjs1 Commented Aug 29, 2014 at 0:25
  • @MartinCapodici Thank you, Man. the problem went away after using line-height. plase answer the question and let me accept your answer. By the way, what is the reason of this problem with padding? Commented Aug 29, 2014 at 0:34

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments