0

If you got to http://www.claymation.azularis.com/work and look at the search bar, there is a text box and a search button. Depending on which browser you look at it, the text box will be either same height as the button or smaller. I am trying to figure out how to make them even size across all browsers.

Why is this happening and how can I fix this?

Just to give example, in Firefox when I use Firebug to measure size of the submit button it says: 19 px. When I measure in chrome, it says 16px. I tried setting min-height: 19px; but chrome still renders it as 16 pixels.

Bagzli
  • 6,254
  • 17
  • 80
  • 163
  • 5
    welcome to Browser Wars III. The only remedy to most differences is adding conditional styles to target specific browsers... or simply do not care. – Devin Aug 20 '14 at 01:42
  • maybe the problem is in your font browser display it differently. http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers – Ireneo Crodua Aug 20 '14 at 02:33
  • Chrome on mac shows 19px. If you add a line-height for your text, the display will be more consistent across browsers. Try adding: line-height: 1.2em; – o--oOoOoO--o Aug 20 '14 at 13:34
  • Yeah I was testing with line height but that didn't fix the issue. – Bagzli Aug 20 '14 at 15:04

1 Answers1

1

Try to use this prefixes:

.buttonHeight
{
   height: 19px; // probably your code
   -webkit-height:19px; // for chrome and safari
   -o-height:19px; // for opera
   -moz-height:19px; // for firefox
}

For IE you can just pray...

ReadyToWork
  • 81
  • 1
  • 10
  • Funny enough, that had no effect – Bagzli Aug 20 '14 at 23:45
  • it turns out the border was a problem, for some reason chrome was creating a border and IE would not, so when I set border:none then it all started matching up. – Bagzli Aug 20 '14 at 23:49
  • IE lower than 10 doesent support css in total, and css3 I dont wanna mention. Just make check if visitors using IE. If they using IE just give them a notification like this http://postimg.org/image/lk0m5eqlh/ and give them links to download chrome, firefox, safari or opera and keep calm and forget IE. – ReadyToWork Aug 21 '14 at 07:19