CSS height and padding not working properly - css

Question

I am trying to build a log in with textfields that have padding on them. But the problem is that it doesn't seem to work. I don't know if it is the height or the padding but there must be something wrong because it used to work and after I opened the page again it didn't, I don't know why.
Here is the CSS:
.Login-Textfield{
width:280px;
height:20px;
padding:15px;
background-color:#EEE;
border:none;
outline:none;
color:#222;
text-align:right;
font-size:20px;
font-family:main;
}
And here is the HTML:
<!-- Login -->
<div class="Content-590">
<div class="New-Offer-Header"><span class="FL"><img src="../images/logo-2.png" width="160" height="70" /></span><span class="FR"><img src="../images/offer-header.png" width="160" height="70" /></span></div>
<div class="New-Offer-Content">
<form action="../ex/ad/create-offer.php" method="POST">
<div class="New-Offer-570">
<input type="text" name="title" class="New-Offer-Textfield-Long MB10" dir="rtl" placeholder="عنوان الإعلان" value="" />
</div>
<div class="New-Offer-Right ML10">
<select type="text" name="section" class="New-Offer-Select MB10" dir="rtl">
<option>أختر القسم</option>
<option value="value">option</option>
</select>
</div>
<div class="New-Offer-Left">
<input type="text" name="talent" class="New-Offer-Textfield MB10" dir="rtl" placeholder="الموهبه" value="<?php form_values('talent'); ?>" />
</div>
<div class="New-Offer-570">
<textarea type="text" name="description" class="New-Offer-Textarea MB10" dir="rtl" placeholder="الوصف"><?php form_values('description'); ?></textarea>
</div>
<div class="New-Offer-570 F28">:أرغب في</div>
<br />
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="work" class="Switch" id="work" /><label dir="rtl" for="work">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل</div>
<div class="New-Offer-Remember"><input type="checkbox" name="freelance" class="Switch" id="freelance" /><label dir="rtl" for="freelance">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل المستقل</div>
</div>
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="part_time" class="Switch" id="part_time" /><label dir="rtl" for="part_time">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل الجزئي</div>
<div class="New-Offer-Remember"><input type="checkbox" name="train" class="Switch" id="train" /><label dir="rtl" for="train">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">التدريب</div>
</div>
<div class="New-Offer-570"><center><input type="submit" class="New-Offer-Submit" value="!أضف موهبتك" /></center></div>
</form>
</div>
</div>
Can you tell what is the problem?
Please visit the page: http://www.mawhibaty.com/login.php

Answer 1

Your page looks fine to me, so I don't know what is the problem. But maybe you should not specify both the height and the padding. If you specify the font size and the padding, the height should adjust automatically. If you specify the font size and the height, the padding should adjust automatically. I think you should define only two of the three: font size (including the default white space above and below the letters) and padding, or font size and the height of the input text field.

Answer 2

The text input fields do have some padding, but I have no idea of knowing if it's as much as you want. I would try removing the "height" from your CSS because the padding will determine the height.

Answer 3

I have found a solution ...
All I needed was to remove the height and the padding will work great for text field. I don't know why but it worked.