CODEWITHSUNDEEP
csspadding
bonny
bonny

Reputation: 3247

how to use padding in different browsers?

I have some strange behaviour in using padding.

I have a div as a wrapper. This wrapper has a padding of 25px to both sides:

.wrapper #header #navline #log form .small {
    height: 25px;
    width: 180px;
    padding: 5px 25px;
}

in that wrapper I have an input field with the following css:

input[type="text"],[type="password"] {
    font-size: 10px;
    width: 180px;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    outline:none;
}

and as error class:

input.error {
    background-image: url(../images/error.png);
    background-repeat:no-repeat;
    background-position: 160px 50%;
    width: 165px;
    padding-left: 5px;
    padding-right: 20px;
    position: absolute;
    z-index: 3;
}

so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:

firefox: firefox

chrome: chrome

the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?

Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?

Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?

Upvotes: 2

Views: 6573

Answers (1)

Code.Town
Code.Town

Reputation: 1226

Add css3 box sizing to every element that has padding. It will fix the issue.

 .text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

Upvotes: 5

Related Questions