Text Boxes

can you make them the same size?

[Newnewbie]

HI!
I am struggling with a concept and need some help. How can you make a text box look the same in both IE and NetScape? I need to create a search function that searches a database, and I'd like it to be the same width in both browsers...

Thanks!

[Nick_W]

size="12"

??

Nick

[Newnewbie]

Actually,
Let me clarify my question... I've got a constrained space (146 X 64) that I want to put a form. In that form I need a textbox, then under that a pulldown menu. Then I need a gif image to act as a submit button. Is it possible maybe with CSS to fit all that in there and make it look uniform across browsers...

[Nick_W]

Unfortunately there is no such thing as 'uniform across all browsers' but you can make it nice across all browsers.

CSS would be ideal but, nn4 won't have any of it and that area, is tiny?

Nick

[Newnewbie]

You are talking about EARLY versions of NN4, right? And that they are incompatible with the height attribute on text boxes, ect... right??

[rewboss]

By "text boxes" you mean text input fields in forms, right?

The answer to your question is: no. The size your text boxes end up will depend on:

1. The platform
2. The browser
3. The font face
4. The font size
5. The user settings

Even if you could predict points 1-4, there is nothing to stop a user adjusting his or her settings. A visually-impaired user might select a larger font size, for example, resulting in a bigger input field and your perfect form will break apart.

[Nick_W]

Yes, much better to adopt liquid design theory to a site and let the user decide how he views the page.

Sure, you need some control otherwise you'd have a very dull site but try to work on 'suggestions' to the browser rather than 'orders'

Nick

[joshie76]

I posted a possible solution to part of this problem here, you'll find some others discussed too.

[webmasterworld.com...]

[starway]

I have a solution that works at least on Windows (can't test on Mac or Linux).
For Opera, IE and Mozilla/N6+ you should add css class:

.input1 {width: 146px; font: 10pt verdana,arial,sans-serif}

and add it to html code:
<input type="text" class="input1">

Unfortunately, "width" css property doesn't work in NN4.x, but you can adjust it to make the same there too.
You have to add "size" attribute to <input> tag according to font/size specified in css class (yes, it was added for this purpose!). It will be something like this:

<input type="text" class="input1" size="8">

Play with "size" attribute value and you'll get the desired result. I've been using this technique for many times and it works excellent.

good luck

P.S. Can anybody test this on Mac/Linux and tell if it works there?

[Newnewbie]

Thanks for your suggestions! This has really been a big help!

Just wondering... Does anybody know how size correlates with pixels? Like if I say size="5" how many pixels is it, or is it different with every broswer??

[starway]

>>Does anybody know how size correlates with pixels?
It depends on text font/size of the input fields.

That's why I wrote you have to play with it.