Issue with form in firefox

alphasolutions

Hi guys,

im creating a form at the minute and am using this to make some parts of the form only appear as needed due to its size. Its working fine and looks right in IE but if i look at it in Firefox there is a huge amount of white space under the form. Any ideas whats causing it or how to get rid of it??

Thanks

form here:

dkell

I just took a quick look at it with Firebug in Firefox, and something is setting the #main height to:

element.style {
height:3798px;
}

I don't know which of the scripts is doing that - although I'd guess its a problem with the equalcolumns javascript file.

You've also got some JavaScript errors showing up with some of the radio buttons - don't know if that's contributing too...

alphasolutions

The error only happens on the pages with forms so i dont think its the equal colums cos they work fine on all other pages without the forms.
Also i cant see what the error is that firebug is picking up on the java, its saying the dropwdown lists are giving the error but i dont see why

alphasolutions

anyone?

dkell

Is it possible that the script you're using is calculating the height of the middle column based on if all the hidden elements were being displayed?

Try setting a min-height manually, instead of using that script and see what happens. You could use this (for Firefox) and a conditional CSS statement to set the height for IE.

Those JavaScript errors on the radio buttons at the bottom of the page seem to be gone now...

alphasolutions

I pressume you mean left column, there isnt a middle one. I dont think thats the case as the usableforms is suppose to basically put the hidden ones into "hyperspace" until they are required according to the site its from. Also i would have thought that would have made it an issue in all browsers not just Firefox.

How do you mean set a min height and not use the script? The script is there so control the hidden fields of the form and make them visible depending on the options clicked.

dkell

Sorry, I meant the #main, not the middle column.

The script I was talking about was the equalcolumns.js file, not the usableforms one, as I assume this is the one controlling the heights of #main, #right and #contentwrapper.

If you try not using this script, and instead add the min-height property to the CSS for #main, #right and #contentwrapper, and see what the effect is.

alphasolutions

I'll give it a try but the pages without the forms work and look fine in both browsers so i dont think the issue lies with the equalforms script. It just seems to be the ones with the forms.

dkell

That's why I was guessing that the script is including the hidden form fields when doing it's height calculations....but it was just a guess

alphasolutions

I thought that first but like i said it works fine in IE, it may be that it does it in firefox and not IE but i cant see why. That line you have above with the height being set to 3798 is obviously whats doing it but i think that line is the result of the script and a counter. I dont want to leave it like this cos its a huge amount of extra space.

alphasolutions

I just knocked off the equalcolumns script and set the min height to 200px and it seems to have worked. Your a legend!
One more question now though, how do i get the #right to have a continuous background colour like it did?
Add a background image on repeat?

Edit: Not to worry think i have it all fixed now. Thanks for the help dkell, i should have copped it but im just sick of looking at it and trying to fix it. Thanks again i can sleep easier now!!

dkell

No problem....it was a good guess!! Good to hear it worked out.