Text field text stretching?

cormie

Hi,
I put a new text field on my Man with a Van site at the top and sometimes when I go on, the text is stretched like this:


The below one is the way I'd like it to always appear but it sometimes appears stretched like in the top one.

This is the code I'm using:

<div id="text">
			<form method="post" action="cormie.php">
			<br />
			<input onClick="this.value='';" onBlur="this.value=!this.value?'Enter Your Name & Number for a Fast, Free Call Back!':this.value;" name="name" value="Enter Your Name & Number for a Fast, Free Call Back!" type="text" style="font-size: 7pt;" size="53" maxlength="140" /> <input type="submit" style="font-size: 7pt; padding:0;" value="Send" />
			</form>
		</div>

Can anyone tell why this is happening and is there any way to fix it?

Any help would be appreciated

Thomas_S_Hunterson

Different font settings on different browsers?

cormie

Afraid not, it's the same browser I'm using, Firefox, seems if I clear the cache and go back to it, it's fixed, but happens again and again..

DonkeyStyle \o/

You tried using px or em for the font? Might scale better.
Or if something else is creeping in try using a class just for that input with !important all over it.

cormie

I don't understand any of that I'm afraid

It took me about 5 hours of googling, trying, failing and attempting again to get that text field the way it is now so it's not something I know about and something like this nag I wouldn't have a clue what to do. Tried Google but no luck on this one! Is there anything off in the code anywhere I wonder?

Goodshape

You could try specifiying the letter-spacing in the CSS.
http://www.w3schools.com/css/pr_text_letter-spacing.asp

cormie

Thanks for that, do you have any idea where I would put that code into the code above? It doesn't appear the same system

Dades

cormie - this might be way off - but when the text appears stretched is the browser window zoomed in?

In FF sometimes you can zoom the window display by accident (by unintentionally scrolling the mouse wheel while holding down Ctrl).

When I zoom in one level in FF the text stretches - however the image is also stretched unlike the one you have displayed.

Just a thought!

cormie

I'm afraid that's not it but thanks for the suggestion the text just sometimes turns out like t h i s

Dades

cormie wrote: »

Thanks for that, do you have any idea where I would put that code into the code above? It doesn't appear the same system

If you want to try Goodshape's letter-spacing option, you include it in the style for the textbox after the font-size:

[HTML]style="font-size: 7pt; letter-spacing: 0px"[/HTML]

Though it changes nothing for me - which is unsurprising since I can't duplicate your issue (except by zooming in FF that is!)

cormie

Ah that's the part of the code I was looking for, thanks very much. My host is working on some migration stuff at the moment so once it's sorted I'll add the code and see how it goes. If you keep revisiting vantasks, it may happen, usually when I close/open firefox it's as it should be, then if I go from vantasks to another page and then browse for ages and forget about it and then return to vantasks, I see the spacing issue, so it's pretty hard to duplicate alright

Thanks again for the code and I'll report back once I try

cormie

I've just added it and it seems to be doing the job so far! Thanks a mill if this works! And thanks for the suggestion if not still

cormie

Dang, it's happening again even with the above code in it unfortunately Wonder what else it could be

cormie

Anyone have any more clues here? I also see that the text spacing will actually expand the box itself, whereas what's happening to me, the box stays the same, but the text is spaced oddly.

Malice

This might be something you already use but have you tried installing and using Firebug? It will tell you what styles are being applied to and inherited by the textbox. It's possible that there is a troublesome style that has been overlooked.

Dades

cormie, are you sure it's not the FF zoom option?

Your screen:



Mine with the FF zoomed out one level (CTRL and mousewheel) and the original:



Looks uncannily similar and there's nothing wrong with your code.

cormie

Hi Dades, seems you've replicated the problem on your own screen too without realising it :P I don't have a mouse so can't do the scroll wheel zoom, but pressing ctrl and + gives the same result. This is what I see:



but what we both should have seen at the normal zoom level is the bottom one here:



So what happens to me is sometimes I go to vantasks.ie and I see just ba at the end on normal zoom, which is wrong, and if I close ff and reopen, I see back!, which is right. So we're both seeing the same problem it appears which is both good and bad:o

Dades

Is the font in the form meant to be Verdana 7pt?

That's what it seems to be displaying as in FF, and possibly why it looks odd.
Maybe change it to Arial 8pt or something (using the font-family style within the form code to overwrite the default) and see if looks better.