CODEWITHSUNDEEP
css
Rickyrock
Rickyrock

Reputation: 328

Padding Css issue-browser compatibility issue

I am trying to give difference padding for browser compatibility issue

-webkit-padding-start: 4px 0px; //for google chrome
-moz-padding-start: 3px 0px;    //for Mozilla Firefox
padding: 3px 0;                 // others browser

But result is padding:3px 0; take both browser. I need to differentiate it.

Upvotes: 0

Views: 1479

Answers (2)

Mr Lister
Mr Lister

Reputation: 46559

If you do it in that order, the browsers will use the last declaration: the padding will override the -webkit-padding-start. So switch the declarations around.

padding: 3px 0;                 // other browsers
-webkit-padding-start: 4px;     // for Google Chrome
-moz-padding-start: 3px;        // for Mozilla Firefox

Then -webkit-padding-start will override the start value of padding.

Upvotes: 0

Guffa
Guffa

Reputation: 700322

If possible, you should try to use the same style for all browsers. Even if that is a bit more work initially, it makes it easier to maintain. That said,

The padding-start styles take a single value, not two values.

Example, syntax for -moz-padding-start:

-moz-padding-start: <length> | <percentage> | inherit | auto;

Example:

-moz-padding-start: 10px;

Ref: https://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

Upvotes: 1

Related Questions