border: solid messes up in NN4

[johntabita]

I have created a style for a form like so:

input { font-family: monospace; font-size: 12px; color: #000000; background-color: #EEEEEE; border: 2px solid #666666 }

NN 4 ignores the style, except for the "solid" value in the "border" property, which makes these stupid little boxes beneath each text box and submit/reset button:

http://www.mmtglobal.com/formtest.html (form is towards the bottom)

Unfortunately, removing the "solid" value causes NN6 to display the submit/reset buttons as just gray boxes without any border.

Is there a simple solution to this that I've overlooked? I have come up with a rather bizzare and complicated workaround, but if there's an easier way, I'd like to know. If not, I'll post my "solution" here later.

[tubedogg]

If you do find a workaround please do let us know. I have the exact same problem.

[johntabita]

Okay, here's the steps I used to fixed it:

1. Remove the unit measurement ("px") from the font-size value like so:

font-size: 12

(If you think that just removing the entire declaration will fix it, it doesn't. The stupid little boxes still don't go away.)

2. The above "fix" will cause the submit/reset buttons to lose their font-size formatting. To re-apply the proper font-size, make a class:

.buttontext { font-size:12px }

3. This class has to be added to each submit/reset button:

<input type="submit" name="Submit" value="Submit" class="buttontext">

That should do it!

[geiger]

er that didnt work. i already have my sizes as a class and if i create a font-size:8px the formatting isnt correct =( whats the REAL way to do it?

[Doug Baker]

I've run into the same problem with the text box borders. There are several Netscape 4 hacks listed at http://www.richinstyle.com/mastercla...html#netscape, and I suggest you look at those to see what would work best for your needs. However, based on what you want, I'll suggest a few of the hacks here:

[list=1][*]Use the backslash to hide from Netscape - P \{ {color: red; background: green} hides from Netscape [*]Use !important - Netscape ignores it; for example, P {color: red !important} P {color: blue} would apply blue in Netscape (and IE 3 (although for a different reason - IE 3 ignores the whole declaration (provided the property takes as its value a single identifier), Netscape just the !important bit)) and red in IE 4-5 and Opera [*]Have a line break between the ! and the important to hide the whole declaration from Netscape [/list=1]

While I haven't tested these hacks myself, I believe www.richinstyle.com, is one of the most thorough references on CSS available online.

Doug

[johntabita]

Doug,

Thanks so much for your post. I was hoping to find a less complicated hack.

I just discovered RichInStyle yesterday, in fact. I will check it out. Thank again!