Home/ Questions/Q 6720647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:14:14+00:00

I’m sure someone’s had this problem before but I can’t figure it out because

  • 0

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.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0