Padding changes from browser to browser

[Swathi]

Hii everyone..

I have one image button and appying css to it as follows.

.divHLAddProjectAdvanceSettingsImage {

float: right;
padding-left: 100px;
padding-top: 4px;
padding-right:0px
}

but the view changes from chrome to firefox and IE.Besides this image button, there is one normal button. i want these both to be side by side without much space between them. It showing properly in chrome but IE and firefox shows a little more unwanted space between them. can anyone pls tell me how to avoid this unwanted space.

I could not see any way here to attach images to show.

Thankyou.

[LewisCowles1986]

you need to set box-sizing explicitly.

I use the following

* {
  box-sizing: border-box;
}

but you can also add vendor specific prefixes to target or add support for other systems

[Paulie_D]

I could not see any way here to attach images to show.

You can always make a reduced case version in Codepen.io however a proper reset.css and as mentioned box-sizing property should take care of most of your issues.

[Swathi]

thanks for your response.

I have added that line of code to my css. But could not see any difference.

And also please tell me how to add browser specific css.I have added like:

[if {!} IE] padding-left: 100px;

But above line of code showing error — missing a property name before a colon(:).

thanks.

[Paulie_D]

please tell me how to add browser specific css

You really shouldn’t need to do this if you have a proper CSS reset such as Normalize.css

http://necolas.github.io/normalize.css/

If you can make a short demo in Codepen.io though we might be able to help further.

[Author]

Posts