CODEWITHSUNDEEP
cssgoogle-chromewebkit
Adi
Adi

Reputation: 4022

CSS button size in chrome different to safari (both webkit browsers though?)

I have a base css which amongst other elements, sets my inputs to:

  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;

And i also have this for the specific button in question

header input[type=submit] { background:#383838; color:#FFF; padding:4px 5px; }

Everything is fine except the input button in Chrome which is 2 pixels shorter in height and in width then every other browser (so like there is 1 pixel diff for each side). What makes this more frustrating is this isnt affecting safari which is a webkit browser also.

Any ideas why?

Cheers, Adi.

Upvotes: 1

Views: 1408

Answers (2)

monk
monk

Reputation: 215

you should try CSS reset at the first of the style-sheet document. some browser take their default styling .. so this may also be an issue

Upvotes: 0

wanovak
wanovak

Reputation: 6127

buttons and inputs are rendered (slightly) differently by every browser (padding, margins, etc.) If you want the exact same result across every browser, you'll need to target each specifically with different style rules.

Upvotes: 1

Related Questions