CSS in forms

Dev Shed Forums Sponsor:

August 9th, 2001, 10:48 AM

szyslak

Junior Member

Join Date: Aug 2001

Location: madrid, spain

Posts: 17

Time spent in forums: < 1 sec
Reputation Power: 0

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

August 9th, 2001, 11:56 AM

Nemi

Clueless llama

Join Date: Feb 2001

Location: Lincoln, NE. USA

Posts: 2,353

Time spent in forums: 2 Days 12 h 39 m 5 sec
Reputation Power: 116

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.

August 9th, 2001, 12:11 PM

szarecor

Contributing User

Join Date: Apr 2001

Location: New York

Posts: 122

Time spent in forums: < 1 sec
Reputation Power: 13

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.

August 9th, 2001, 12:19 PM

Nemi

Clueless llama

Join Date: Feb 2001

Location: Lincoln, NE. USA

Posts: 2,353

Time spent in forums: 2 Days 12 h 39 m 5 sec
Reputation Power: 116

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.

August 9th, 2001, 12:54 PM

szarecor

Contributing User

Join Date: Apr 2001

Location: New York

Posts: 122

Time spent in forums: < 1 sec
Reputation Power: 13

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!

August 10th, 2001, 10:34 PM

Nemi

Clueless llama

Join Date: Feb 2001

Location: Lincoln, NE. USA

Posts: 2,353

Time spent in forums: 2 Days 12 h 39 m 5 sec
Reputation Power: 116

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.

Code:

<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

Developer Shed Advertisers and Affiliates