Text being different sizes in different browsers

I’m sure someone’s had this problem before but I can’t figure it out because I guess I just don’t know enough.

I have a form. One of the inputs has some JS attached so that as the user types (keyup), a div elsewhere on the page updates with what they’re typing. e.g. They type “hello” and it appears in a div below.

  • Combining inline css and hover state, is it possible?
  • Inherit Color from Parent and Perform Color Shading in CSS
  • How can I access style properties on javascript objects which are using external style sheets?
  • Better way to use jquery each
  • Create a new (permenant) CSS style in jQuery
  • Ionic: how to use cssClass in $ionicPopup?
  • I don’t want the div which updates to get any bigger than 900px wide and only one text line high.

    At the minute I have the div with overflow hidden so any extra text just disappears, also I have the maxlength of the input set so it can’t get too big. However, since different browsers space text differently, in some browsers it’ll allow (for example) 10 words, in others it’ll allow 11.

    I have done the css reset thing which is meant to get all browsers acting the same but the spacing of text doesn’t seem too affected.

    Is my only option trying to use css to make the spacing between characters the same accross browsers?

    Can anyone suggest any alternatives?

    EDIT

    here’s the css reset I’m using:

    html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}
    

    The font I’m using is Arial 32px

  • Javascript width of span element
  • style width vs width attribute in HTML
  • Use 100% height with Bootstrap affix data-offset-bottom
  • Prevent horizontal scroll in iOS WebApp
  • Escaping JavaScript[/CSS] between <script>[/<style>] tags: Insights on a potentially broken status quo
  • How do I find which JavaScript is changing an element's style?
  • One Solution collect form web for “Text being different sizes in different browsers”

    Your CSS reset is a pretty poor one. It fixes a lot of display problems but down not address text sizing at all, so it’s useless for this issue. You can find a more comprehensive one here, but changing your reset page may have unintended effects. I’ll suggest using some inspection tools to check if you have padding or margin shrinking the available size to write text in, and if not then setting all aspects of the text so that it is rendered consistently.