Forum Moderators: open
CSS
.form_textarea { float: left;
height: 60px;
padding-bottom: 3px;
margin-bottom: 3px }
.field_name { float: left;
width: 125px;
padding-top: 3px;
text-align: right;
font-weight: normal;
color: #000000;
font-size: 12px }
.field_value { float: right;
padding-left: 6px;
padding-top: 0px;
width: 325px;
text-align: left;
color: #000000;
font-weight: normal;
font-size: 12px }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div class="form_textarea">
<div class="field_name">Is there anything that would prevent you from doing a course of your choice?</div>
<div class="field_value"><textarea rows="3" cols="53" name="problem-info" tabindex="16"></textarea></div>
</div>
Seems to be OK in NS7+
[edited by: tedster at 5:09 pm (utc) on Feb. 8, 2008]
The gap you see sounds like it is created by a margin or an html error, but 110 pixels is too much for a browser's default margin. So, the first thing I would suggest is validating your html with the W3C HTML Validator [validator.w3.org]. There is also a W3C CSS Validator [jigsaw.w3.org] that might be useful.
This Page Is Valid HTML 4.01 Transitional!
W3C CSS Validator Results Congratulations! No Error Found.
This document validates as CSS!
.field_name { float: left; }
.field_value { float: right; }
There really is no reason to float elements left AND right in a single block element like that, and has wreaked havoc on my layouts from time to time. Just choose one or the other and let the other element fall in the natural document flow.
If you float right, you'll have to put the right-floated element first in the source code.
While this offers no direct explanation of the behavior, it may make the issue go away.
Regrettably, this isn't what causing the trouble as there are no comments <!-- comment --> in the form, just one before it starts (90 lines of code before) and one at the and (about 10 lines later).
I've tried inline CSS style to change the padding and margins on the DIVs, even tried making the text of the question a plain line of text outside the div... all no help. Changing the CSS margin-right or padding-right of the "field_name" DIV just pushes the textarea further down the page!
I did inerit part of the CSS from a colleague... I'd not really taken notice of the right float... Removing it does not cure anything however, but the textarea and the repeated "?" now both fall to the left of the space below the question text ... perhaps that will spark something somewhere!
The set of nested DIVs that had the problem was the last-but-one of these nested DIVs in the FORM. The last set contained the SUBMIT and RESET buttons. By altering the HTML and CSS for the last set of DIVs, the problem vanished.
Originally the SUBMIT/RESET bottons were in the same layout of DIVs as in original example, but with "&nsbp;" in place of the question text (or the DIV vanishes). The buttons were in the "field_value" DIV.
Solution:
CSS, Additional class created:
.field_submit { padding-left: 134px;
padding-top: 0px;
width: 325px;
text-align: left;
color: #000000;
font-weight: normal;
font-size: 12px }
HTML:
<div class="form_field">
<div class="field_submit"><input type="submit"> <input type="reset"></div>
</div>
This lined up the buttons with the left edge of the other form fields and the textarea in the previous DIV set moved back in to place and the duplicate "?" vanished!
The overall width of the final DIV is now about 6px narrower than before - that was all it really needed - just making the last DIV narrower triggered, "something"!
