[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