[thelist] css w/ Navigator
Gerenday, Perry (P.)
pgerenda at visteon.com
Thu Oct 18 12:02:31 CDT 2001
-----Original Message-----
From: Adam Slesinger [mailto:bread_man at hotmail.com]
> Hi All! I have a couple quick questions:
>
> 1) I have a cascading style sheet and I'm trying to use it
> to format input
> form fields and buttons. I put the following in the file:
>
> input, select {font: Verdana, Arial; color: #ffffff;
> font-size: 8pt;
> border-width:thin; border-color:#AFC0E0; border-style:ridge;
> background-color:#777777}
> It works in IE 4+, but not in NN 4.7.
<snip>
Hi Adam,
First off, I can't believe you are getting anything in NN4 if your style
sheet is the same as your example. Use "font-family" to identify your font.
Now, if you do that, I believe you'll discover two little boxes inside your
form in NN4 that don't show up in IE5. You can get rid of them by
eliminating "border-width:thin" in your style sheet, since "thin" is the
default border size for IE. There just isn't anything you can do to make NN4
show your background color - sorry.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> In NN, the field is a lot longer than
> in IE and it stretches a table farther than I want. I
> thought my refrences
> said this attribute could be used in NN 4+ and I swear I've
> seen other
> people doing it. Any ideas??
Now it's a good idea to split your CSS into classes like and give your
textbox a width attribute:
.MyTextbox {font-family:Verdana, Arial;
font-size:8pt;
color:#ffffff;
border-color:#AFC0E0;
border-style:ridge;
background-color:#777777;
width:25px;}
.MyButton {font-family:Verdana, Arial;
font-size:8pt;
color:#ffffff;
border-color:#AFC0E0;
border-style:ridge;
background-color:#777777;}
and apply them directly to the elements inside the form:
<input class="MyTextbox" type="text" name="email" size=20 value=""><br>
<input class="MyButton" type="submit" name="signup" value="Submit">
NN4 will follow [size="20"] set in the input tag and IE will follow the CSS.
In this way you can set sizes separately for the two browsers.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> 2) My IE browser seems to be putting space before and after
> a form, creating
> unwanted space between it and surrounding elements ubove and
> below ...
Put your form inside a table with cellpadding, cellspacing and border
attributes set to "0" like this:
<img src="your.gif">
<table cellpadding="0" cellspacing="0" border="0"><tr><td>
<form method="get" action="/cgi-bin/email.plx" id=form1 name=form1>
<input class="MyTextbox" type="text" name="email" size=5
value=""><br>
<input class="MyButton" type="submit" name="signup" value="Submit">
</form>
</td></tr></table>
I don't know exactly why this works but it does.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Hope this makes things somewhat acceptable for you.
Perry Gerenday, Visual Communications Artist
www.virtually-artistic.com
More information about the thelist
mailing list