homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

IE6 form field layout problem
textarea field has too much space above it

 12:41 pm on Feb 8, 2008 (gmt 0)

I have a web site in development and have produced an example of the site layout as a form. It contains all the usual form elements, including two "textarea". One textarea works fine, but the other (same HTML, same CSS) has a gap of about 110px above it, and the question mark at the end if the question that it relates to is *repeated* near the textarea! The text next to the textarea appears in the right place.


.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 }

<!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>

Seems to be OK in NS7+

[edited by: tedster at 5:09 pm (utc) on Feb. 8, 2008]



 6:57 pm on Feb 8, 2008 (gmt 0)

The html you posted does not have any form element - that might help you out.

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.


 9:11 pm on Feb 8, 2008 (gmt 0)

There is no form element 'cos the code is just a snippet!

This Page Is Valid HTML 4.01 Transitional!
W3C CSS Validator Results Congratulations! No Error Found.
This document validates as CSS!


 4:00 pm on Feb 11, 2008 (gmt 0)

Sounds like one of IE's many bugs relating to floats.
Maybe the Duplicate Characters bug:


 5:03 pm on Feb 11, 2008 (gmt 0)

I've seen the repeating text bug and second that part of the problem. As for the spacing, you might take a closer look at these items:

.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.


 5:16 pm on Feb 11, 2008 (gmt 0)

Thanks for the reference, Fotiman.

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!


 5:22 pm on Feb 11, 2008 (gmt 0)

Thanks rocknbil, I was just replying to Fotiman as you were typing!

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!


 5:40 pm on Feb 12, 2008 (gmt 0)

I have got around the problem, my solution may help others figure out what was happening and offer a proper solution.

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.


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 }


<div class="form_field">
<div class="field_submit"><input type="submit"> <input type="reset"></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"!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved