Topic: CSS with Input & TextArea tags, NN4x vs IE problems

OK, if some kind CSS guru could give me some input it would save me LOTS of time!

This was started in another forum but, after some experimentation, it has turned into a CSS issue.

***PROBLEM:

Using an external Style sheet linked to each page in the site causes INPUT and TEXTAREA ?s in a form to stretch way out of proportion in NN4x. Fine in IE5 of course.

***MY OBSERVATIONS:

The following style in the sheet is the problem as it is affecting the INPUT & TEXTAREA in NN4 but not in IE.

P,TABLE,TR,TD {
color: #000045;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 15px;
}

I know this because I can change the font-size and it changes the INPUT/TEXTAREA fields in NN.

INPUT/TEXTAREA's would be more cross browser friendly if I didn?t use ?global? CSS on the page. NN4x vs IE5 rendering of a style is so different as to be useless.

Bugimus suggests using JavaScript browser detection, but don?t know if that would even solve the problem. Actually, if I could use detection and link to another CSS only for NN4x that would work I think.

"If NN4 then StyleNN, else Style1."

I understand this in theory, but not sure I could ever get it to work since JS doesn?t seem to like me! LOL

There is other text on the page that I would like CSS on, and I really don?t want to have to apply the style to individual tags if I don?t have to. I can do in tage styles for INPUT/TEXTAREA to control border and background color in IE since NN ignores them. (I know?I have that problem on another site.)

QUESTION:

What is my best option?

Is there a way to ?turn off? the STYLE SHEET for the form?

Is there a way to apply a different external style sheet to just the form? (I think I tried this on another page with no luck, maybe I don?t understand how you do it?)

How could I write a different STYLE SHEET and the page to keep the ?font-size? from affecting the INPUT/TEXTAREA in NN, then just link to it for that page?

I?m not sure what is the best, most economical solution here. Unfortunately, I feel I need to make this site NN4 compatible for the most part. The good thing is that I am learning a lot in the process!

Anyone interested in helping?I would be MOST GRATEFUL!

Bugimus wrote:

NN4, NN6, and IE all render form elements differently even if you specify the exact same size in your tags.

Specifying the CSS for the elements will help but you will never get them to be the same size with that method alone. If you need them to be really close you will have to detect the browser type with Javascript and then use document.write's to dynamically write in the appropriate size values in the input tags.

I think you will find that NN6 and IE are much closer to each other than NN4 is to either of them. I hope that helps and, yes, this is an extremely frustrating cross-browser issue.

hmm... I had a similar problem before too.. i think
i have 2 style sheets though, one for NN and one for IE, chosen with a simple bit of PHP on the server-side. that solves it for me

i've seen others here at the Asylum use an "import" syntax of some kind when setting style sheets... it was like <link ...> to set your external style sheet like normal, then something like @import or something.. I can't remember... someone else will surely know... but anyways, I think that was not recognized by NN and just ignored (or something like that).

I could be completely wrong on that tho

--Lurch--

Lurch: No you are right.

e-maestro: Shoot over to the GN (button at the bottom of the page) and read through briggl's 2 excellent CSS tutorials. What should solve your problem is, as Lurch says, the use of @import. I extract the styles that cause NS4.x to do soemthing odd and put them in naughty.css (or whatever you like) and then bring it in using @import - NS4.x doesn't support @import and so will ignore those styles. Problem solved.

I would think about setting the widths of your inputs and textareas as I've never had a problem like this and I've used a lot of forms before but the quick fix is the one above.

[edit: Just read the original thread: www.ozoneasylum.com/Forum4/HTML/000066.html
and it depends on what you want. Bugs knows what he is talking about and if you want them to be exactly the same then you may have to do something like he suggests.

one other thought - you might want to specifically set the font-size for the inputs and textareas e.g.:

input, textarea {

  font-size: 10px;

}

which might help - NS4.x is problematic with certain styles but you should be able to get somewhere with the ideas people have out forward]

Emps

[This message has been edited by Emperor (edited 04-02-2002).]