Applying CSS to my Form

soho34 · Aug 18, 2005

Hi,

I have played around with CSS for a while, but usually lost interest because my updates did not generate desired results.

I think this is a basic question for a CSS guru.

I have the following:

Code:

<html>
<head>
	<title>Untitled</title>
	
	<STYLE TYPE="text/css">
  	BODY { font-family: Verdana,Arial;
	       font-size: 6pt;
	     }
	
	</STYLE>

</head>

<body>
<p><font face="Verdana" color="black" size="2">Please answer the following question:</font>&nbsp;</p>
<table cellspacing=0 cellpadding=0 border=1 width="468" height="500" bgcolor="#EABBB9" bordercolor="#D98682">
<tr width="468" height="60">
<td><img src="pp/images/aboutyou_header.png"></td>
</tr>
<tr width="520" height="440" valign="top">
<td>

<form name="aboutyou_form" method="post" action="aboutyou_landing.htm">
<table cellpadding=3 cellspacing=3 border=0>
	<tr>
		<td width="50%">What is your preferred method of communication?</td>
		<td width="50%">
			<input type="radio" name="comm_method" value="Phone" checked> Phone<br>
			<input type="radio" name="comm_method" value="Email"> Email<br>
			<input type="radio" name="comm_method" value="IM"> Instant Messenger (IM)<br><br>
		</td>
	</tr>
</table>
</form>

All I want to do is apply the style sheet that I have above.

I'm getting the Verdana, but I absolutely cannot change the size of the fonts. Everything looks right to me. What am I doing wrong?

In particular, I want the question and my options to be a smaller font.

I even tried changing the "BODY" to "FORM" and no dice. Is it harder to apply CSS to forms? Also, I tried applying the style within the <FORM> tag as:

<FORM style="font-size:8pt;font-family:Verdana">

Thanks for any help you can provide.

soho34

jez · Aug 18, 2005

Its not the form, but the table that is causing the problem here.

Try adding your style to table or td and see if that works, if you want it on the input tags, you could put it on something like...

input{your style here}

BUT that will not work for the above as it is radios and they dont have a font size.

Hope this helps.

Jez

soho34 · Aug 18, 2005

Thanks, jez,

I see what you're saying. The text within my form is actually within tables.

After I applied a:

tr {font-family:Verdana; font-size:14px; color:#000066;},

things worked out.

Thanks,
soho34

jez · Aug 18, 2005

Great!

Just as a side note, the original idea you had to set the size for the whole page, by putting it in a style on the body tag would normally work, except for the tables (i.e. in a div based html file).

Jez

BabyJeffy · Aug 18, 2005

Glad you got it working.

On another note... look into using ems instead of px as you go forward. The thing is... if you use pixels for stuff like font sizes, all browsers (except IE) will scale the font sizes anyway! If you use ems (or %s) then even IE will scale the fonts. This is great as you go forward and want to support a wider community of web browsers (IE is about 85% of the browser market -- and there is no IE available for MacOSX or Linux/Unix platforms... since they ceased development for the Mac over a year ago).

I'll move off the soap box now [smile]

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Applying CSS to my Form

soho34

IS-IT--Management

jez

Programmer

soho34

IS-IT--Management

jez

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor