Hello, all.

I am currently working on a contact form that uses Javascript for field validation, before displaying an 'errors' span that will be populated with a <p> tag explaining what went wrong. This is what my contact form looks like:

And this is the CSS applied to it:

When the form is submitted, the Javascript will quickly check all of the inputs and see if they have values. If they don't, the <span> will have its visibility attribute changed to 'visible', and the users will be able to see what went wrong. However, under Firefox the span doesn't seem to be filling the full width of the <fieldset> that it's inside of. Does anyone know what might be going wrong?

You can see the problem occuring here(link changed - problem is resolved), if you enter nothing in the e-mail or comments field before submitting the form(must have javascript enabled).

Edit: After a bit more testing, I've also discovered that the spans are at 100% of the body width under IE6. I'd like to fix this too.

This post has been edited by girasquid: 20 Jun, 2007 - 07:38 PM

I would start by fixing your invalid generated source code. p elements are illegal inside of span elements. Not even sure why you’re using a placeholder element (the empty span) when you can just use insertBefore() without the placeholder.

The issue may also be due to the fact that Firefox treats fieldset elements as replaced elements so that they can get that fancy text effect out of the legend element. I tried to see if it would work in Opera, for comparison, but, apparently, the script doesn’t work at all in that browser. Anyway, you might try using div elements instead and seeing if that makes a difference.

I got rid of the p's inside of my span's, and I've tweaked the template so that instead of a fieldset, things are stored inside a div with the class 'fields', with the styles originally applied to the fieldset. This has worked for the top span, but not for the bottom one. Could this have something to do with the way that I've floated elements?

The updated example can be seen here

It's still working perfectly under Safari.

The HTML now looks like this:


And the changed CSS looks like this:


This post has been edited by girasquid: 10 Jun, 2007 - 12:36 PM

It seems that the issue is a float. I don’t know if this behavior is a bug, but it would seem that way.

Remove the float: left declaration from the div#content .fields block and apply it only to div#content div#responseInfo .fields instead. Since this change causes the second box to no longer contain the floats within, apply the overflow: auto declaration to div#content .fields to create a new formatting context. The edited and added CSS rules are shown below.


While you’re at it, you may want to fix what appears to be an accidentally miswritten selector.


The above should be:

Under IE6, those changes have made it so that the button on the bottom of the second 'fieldset' is overlapping the bottom border. Is adjusting the padding-bottom for this element the only way to fix this, or is there a different solution?

Thanks for the heads up on the miswritten selector.

This may be a hasLayout issue. (Read the article On Having Layout for more information.) Try adding zoom: 1 or some other declaration that invokes hasLayout to the relevant elements.

The problem(except for the hasLayout issue) is resolved under IE6, Firefox 2(Mac), and Safari 2. After taking a look at the article, I added a stylesheet called iehacks.css, which would get linked when a version of IE <= 6 was used to view the page.

However, setting zoom: 1 or display: inline-block didn't resolve the issue; using either of these settings causes the second span to expand to the full width of the content area, expanding the div around it.

edit: after removing the overflow: auto attribute from div#content .fields, the button-lowering bug is appearing on Safari and Firefox too.

This post has been edited by girasquid: 11 Jun, 2007 - 04:41 PM