Helpful Information

Category: CSS Help

CSS in forms

Is there any way to make my forms look the same in Netscape 4, Netscape 6 and Internet Explorer 5?

I've tried lots of combinations with CSS but in some cases the size of the inputs where larger in IE, in other cases in NS4 and so on.

Can anybody help me?
TIA

I dont think this is possible as NS4.7 does not fully impliment the DOM, so what you can do with CSS in NS4.7 is limited. NS4.7 is just evil.

Are you talking about using css for colors, border, etc. or just trying to get the form elements the same size across browsers?

If you're experiencing size problems (widths) in text boxes, selects, etc. you can minimize the difference by making sure that you're using a monospaced font within the form elements. It's ugly but it does the trick.

As an alternative you could generate the text boxes via javascript and assign different sizes according to the user's browser.

Hope this was helpful.

Ironically enough, the only browser you can set the text field font on is Netscape. If you wrap a textfield in font tags in IE, it ignores the font tag, where it renders the text in the textfield modified by the font tag in NS. Go figure.

Nemi:

I've never tried to use <font> tags to style text-fields, but you CAN set text-field font-faces cross-browser using the style attribute of the <input> tag. The following code illustrates that with the font-family specified as "monospace", both IE5.x and NN4.x render the width of the element pretty close to the same (165px in this case).

<html>
<head></head>
<body>
<form name="form">
<input type="text" value="hello world" style="font-family:monospace;">
<br>

<img src="image/spacer.gif" height="3" width="165" border="1">
</form>
</body>
</html>

Now, if I could just convince designers that monospace is a nice looking font!

Ah yes, you are correct sir. I did try an inline style, but I used the short hand 'font' property and failed to set the font size, thinking it was optional when it is not.

<p style='font:courier'>some text here</p>

This is what I did. I don't know why I was thinking all parameters were optional. the first three are, but you must specify a size AND a family. Doh! GJ