<col style="" /> and firefox

[humbug]

I've got a bit of a question regarding the <col> tag and how it takes style attributes in Firefox and Internet Explorer. Here's my code:

/*
 * This is the global style sheet for Humbug's test site. Every page will link to it.
 * Copyright Ben Ritter 2008
 */ 

html, body{min-height:100%}

div{ 
	min-height:100%;
	/*for testing purposes */
	border-style: solid;
	border-width: 1px
}

div.pageWrapper{
	border-color: green;
	border-width: 2;
	min-height: 100%
}

div.nav {
	float: left;
	border-style:solid;
	border-width: 1px;
	border-color: red;
	padding: 0px 5px 0px 8px
}

ul.nav{
	list-style-type: none;
	padding: 0
}

div.content{
	padding: 5px
}

.formLabel {}
.formInput {color:red} /*for the "*" denoting required fields*/
.formDescription {color:#505050}

.error {
	color:red;
	font-weight: bold
}

/* Below here is for fixing floats that protrude from their container */
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

And html:

<div class="content">
	<table class="form">
		<colgroup span="3">
			<col class="formLabel"></col>
			<col class="formInput"></col>
			<col class="formDescription"></col>
		</colgroup>
		<form action="signup.php?a=do" method="post" class="signup">
			<tr>
				<td colspan="2" style="text-align:center; color:black">* denotes required fields.</td>
				<td>Restrictions</td>
			</tr>
			<tr>
				<td>Username:</td>
				<td><input type="text" name="username" value="" />*</td>
				<td>Length: 3-12 Characters: alpha-numerical and _.</td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><input type="password" name="password1" value="" />*</td>
				<td>Length: 3-15 Characters: alpha-numeral, !@#$%^&*_+-=.,/?_ and spaces.</td>
			</tr>
<!-- etc. etc. -->
			<tr>
				<td>&nbsp;</td>
				<td><input type="submit" name="submit" value="Submit" /></td>
				<td>All done?</td>
			</tr>
		</form>
	</table>
</div>

Now here's my problem; In Firefox the css class "formInput", "formLabel" and "formDescription" don't have an effect on the text in their respective columns but in IE they do. The only style that I could get to show any effect in FF was width=Xpx .

It'd be great if there was a way to get this to work so that I don't need to place class="" attributes inside every <td> .

PS Firefox 3.0.3 and IE 7.0.6

EDIT: oh, and if you feel so inclined, here's a link.

[MidiMagic]

You have invalid code that causes FF to throw out the style it is in.

Zero values in styles must NOT have units of measures. Your 0px entries cause the style it is in to be thrown away by the browser:

Yes: 0
No: 0px, 0pt, 0in, 0%, 0em, etc

[humbug]

Wow, I didn't know that. Cheers.

[humbug]

I've made the necessary changes but it doesn't seem to make a difference.

Here's my new css

/*
 * This is the global style sheet for Carpool.com. Every page will link to it.
 * Ben Ritter 2008
 */ 

html, body {
	min-height:100%;
	font-family: arial
}

h1 {
	padding: 20px 0 0 120px;
	vertical-align: middle;
	margin: 0;
}
h2 {
	padding: 5px 20px 0 0;
	margin: 0;
	text-align: right
}

div{ 
	min-height:100%;
	/*border-style: solid;/**/
	/*border-width: 2px/**/
}

div.pageWrapper {
	border-color: green;
	border-width: 2;
	min-height: 100%
}

div.banner {
	/*border-width: 3px; /**/
	/*border-color: blue; /**/
	background-color: red;
	width: 100%
}

.login {background-color: blue;}
div.login {
	float: right;
	text-align: right;
	padding: 5px;
	height: 100px
}
input.login {margin: 4px}
form.login {vertical-align: middle}

div.nav {
	float: left;
	width: 86px;
	border-style:solid;
	border-width: 1px;
	border-color: red;
	padding: 0 5px 0 8px
}

ul.nav{
	list-style-type: none;
	padding: 0
}

div.content{
	padding: 10px
}

/*.signup{}*/

/*.login {}*/

.formLabel {color: blue}
.formInput {color:red} /*for the "*" denoting required fields*/
.formDescription {color:#505050}

.error {
	color:red;
	font-weight: bold
}

/* Below here is for fixing floats that protrude from their container */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

[MidiMagic]

You have improperly nested tags.

The form tag can't be nested inside the table tag, but with the tr tag inside it. The tr tag must be the immediate child of the table tag.

Put the form tag outside the table tag. Input tags can then be put inside the td tags. border width: 2; 2 what?

[humbug]

I have made those changes but no luck.

here's the site. Hit view source to get everything you need (there's no external linking).

I'm baffled.

Edit: The W3Schools TryIt example doesn't work for my on firefox either.

[MidiMagic]

A number 2 is in a style without a unit of measure. Units of measure are necessary for nonzero values, prohibited for zero values.

You have an unescaped ampersand in line 21 of the html. This is grabbing all of the characters until a semicolon is encountered in line 25. Use &amp; for the ampersand.

I found syntax errors in the TryIt example.

The col tag is supposed to be self-closing. There is no </col> tag.

<col class="spoo" />

It may also be that your use of colspan invalidated the styles.

[MidiMagic]

More on col tags:

The definitions for html and xhtml are different.

- The html standard says that col is an empty tag, and has no closing tag. HTML 4.0 Strict code will not validate with </col> tags in it.

- The xhtml standard says that col is a tag pair. But the W3C XHTML 1.0 Strict validator accepts both the tag pair and the self closing version.

- IE and FF accept both kinds of col tag with either doctype. I don't have the facilities to test them with other browsers.