TJ111
08-02-2007, 08:40 AM
Ok so I'm having this annoying issue with a site I'm designing. I have a form that is located in a floated <div> element, inside 2 parent divs, a div which contains the main content section of the page, and a div which contains my entire site. However when you click the link at the bottom of the child <div>, it validates the current fields and reports them in child div of the one the form contains. Basically like this.
<div id='container'>
<div id='body'>
<div id='form'>
<div class='error' style='display:none'>
<!--Content gets added on any errors-->
</div>
<form>
</div>
</div>
</div>
When you click the link, the form has to expand to show the error content, and thus it overlaps the footer for my page. I've tried using the "clearfix" CSS hack, a <div> just set to "clear:both", even using javascript to change the parent divs height.
I think the problem might be with the minimum height setting for the parent div. When I add "overflow:auto" to it, firefox gives it a scroll bar instead of expanding downwards. Here's how I do min-height:
min-height: 400px;
height:auto !important;
height: 400px;
Any input as to what the problem/solution is here would be much apperciated. I put up a test page here (http://deltascan.net/summit/contactSummit.php) that you can see what I'm talking about. Just leave the required field blanks and click next.
<div id='container'>
<div id='body'>
<div id='form'>
<div class='error' style='display:none'>
<!--Content gets added on any errors-->
</div>
<form>
</div>
</div>
</div>
When you click the link, the form has to expand to show the error content, and thus it overlaps the footer for my page. I've tried using the "clearfix" CSS hack, a <div> just set to "clear:both", even using javascript to change the parent divs height.
I think the problem might be with the minimum height setting for the parent div. When I add "overflow:auto" to it, firefox gives it a scroll bar instead of expanding downwards. Here's how I do min-height:
min-height: 400px;
height:auto !important;
height: 400px;
Any input as to what the problem/solution is here would be much apperciated. I put up a test page here (http://deltascan.net/summit/contactSummit.php) that you can see what I'm talking about. Just leave the required field blanks and click next.