Problem with divs, form elements overlapping

[mgmuranaka]

I am totally stumped. I'm somewhat new to using CSS. I am trying to make a form for someone and for some reason in IE7 the Price and Bedrooms divs that I have move upward and overlap over the rest of the content. Everything is fine in IE6, 8, Firefox, and Safari. I have tried everything. Any help would be greatly appreciated. I've uploaded the page below.

<snip>

[edited by: swa66 at 9:45 am (utc) on July 22, 2009]
[edit reason] No links, please sse ToS and forum charter [/edit]

[MartinWeb]

Try changing the positions to "absolute". Also, please add your code.

[mgmuranaka]

i think i pretty much set up the whole thing the wrong way, but here is the code

also, i tried putting in some line breaks before the div, but it worked in ie 7, 8, and firefox, and added a crazy space in ie6

#postbody {
margin: auto;
background-color: #ffffff;
width: 980px;
overflow-y: auto;
}

#postmain {
padding-top: 15px;
margin: auto;
width: 420px;
overflow-y: auto;
}

#posttitlecont {
background-image: url(postcont_01.png);
width: 420px;
height: 34px;
float: left;
}

#posterror {
margin: auto;
width: 400px;
height: 30px;
}

.errortext {
color: #FF0000;
}

.errorbox {
border: 1px solid #FF0000;
}

#posttitle {
padding-top: 10px;
margin: auto;
width: 400px;
height: 10px;
}

#postcontent {
background-image: url(postcont_02.png);
padding-top: 15px;
background-repeat: repeat-y;
width: 420px;
overflow-y: visible;
float: left;
}

#postfooter {
background-image: url(postcont_03.png);
background-repeat: no-repeat;
padding-bottom: 35px;
width: 420px;
height: 11px;
float: left;
}

#ptitlecont {
margin: auto;
width: 400px;
height: 30px;
}

#ptitletitle {
width: 120px;
height: 30px;
float: left;
}

#ptitleinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#ptypecont {
margin: auto;
width: 400px;
height: 30px;
}

#ptypetitle {
width: 120px;
height: 30px;
float: left;
}

#ptypeinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#pstreetcont {
margin: auto;
width: 400px;
height: 30px;
}

#pstreettitle {
width: 120px;
height: 30px;
float: left;
}

#pstreetinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#pstreetcont {
margin: auto;
width: 400px;
height: 30px;
}

#pstreettitle {
width: 120px;
height: 30px;
float: left;
}

#pstreetinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#punitcont {
margin: auto;
width: 400px;
height: 30px;
}

#punittitle {
width: 120px;
height: 30px;
float: left;
}

#punitinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#plocationcont {
margin: auto;
width: 400px;
height: 30px;
}

#plocationtitle {
width: 120px;
height: 30px;
float: left;
}

#plocationinput {
width: 280px;
height: 30px;
float: left;
text-align: left;
}

#pdesccont {
margin: auto;
width: 400px;
height: 30px;
}

#pdesctitle {
width: 120px;
height: 30px;
float: left;
}

#pdescinput {
width: 280px;
height: 105px;
float: left;
text-align: left;
}

#pprice-bed {
margin: auto;
width: 400px;
height: 30px;
}

#ppricecont {
margin: auto;
width: 200px;
height: 30px;
float: left;
}

#ppricetitle {
width: 80px;
height: 30px;
float: left;
}

#ppriceinput {
width: 120px;
height: 30px;
float: left;
text-align: left;
}

#pbedcont {
margin: auto;
width: 200px;
height: 30px;
float: left;
}

#pbedtitle {
width: 80px;
height: 30px;
float: left;
}

#pbedinput {
width: 120px;
height: 30px;
float: left;
text-align: left;
}

#pbath-footage {
width: 400px;
height: 30px;
margin: auto;
}

#pbathcont {
margin: auto;
width: 200px;
height: 30px;
float: left;
}

#pbathtitle {
width: 80px;
height: 30px;
float: left;
}

#pbathinput {
width: 120px;
height: 30px;
float: left;
text-align: left;
}

#pfootagecont {
margin: auto;
width: 200px;
height: 30px;
float: left;
}

#pfootagetitle {
width: 80px;
height: 30px;
float: left;
}

#pfootageinput {
width: 120px;
height: 30px;
float: left;
text-align: left;
}

#pphotocont {
margin: auto;
width: 400px;
height: 30px;
float: left;
text-align: right;
}

#psubmitcont {
margin: auto;
width: 400px;
height: 30px;
text-align: right;
float: left;
}

<div id="postbody">

<form method="post" action="/listing/post">
<div id="postmain">

<div id="posttitlecont">

<div id="posttitle">
<span style="font-weight: bold; font-size: 11pt; color: #ffffff;">
Post a Property
</span>
</div>
</div>

<div id="postcontent">

<!-- START div for error checking -->

<div id="posterror">
<span class="errortext">
* Street address is invalid
</span>
</div>

<!-- END div for error checking -->

<div id="ptitlecont">
<div id="ptitletitle">Title:*</div>
<div id="ptitleinput"><input type="text" size="39" name="listing[title]" value="" id="listing_title" /></div>
</div>

<div id="ptypecont">
<div id="ptypetitle">Type:*</div>
<div id="ptypeinput">
<select name="listing[property_type]" id="listing_property_type">
<option value="1">Apartment</option>
<option value="2">Commercial</option>
<option value="3">Homes</option>
<option value="4">Roommates</option>
<option value="5">Vacation</option>
</select>
</div>
</div>

<div id="pstreetcont">
<div id="pstreettitle">Street Address:*</div>
<div id="pstreetinput"><input class="errorbox" type="text" size="39" name="listing[address1]" value="" id="listing_address1" /></div>
</div>

<div id="punitcont">
<div id="punittitle">Apartment / Unit No:</div>
<div id="punitinput"><input type="text" size="39" name="listing[address2]" value="" id="listing_address2" /></div>
</div>

<div id="plocationcont">
<div id="plocationtitle">Location:*</div>
<div id="plocationinput"><input type="text" size="39" name="listing[location]" id="listing_location" /></div>
</div>

<div id="pdesccont">
<div id="pdesctitle">Description:*</div>
<div id="pdescinput"><textarea rows="4" cols="30" name="listing[des]" id="listing_des"></textarea></div>
</div>

<br />

<div id="pprice-bed">
<div id="ppricecont">
<div id="ppricetitle">Price:*</div>
<div id="ppriceinput"><input type="text" size="10" name="listing[money_rent]" value="0" id="listing_money_rent" /></div>
</div>
<div id="pbedcont">
<div id="pbedtitle">Bedrooms:*</div>
<div id="pbedinput">
<select name="listing[property_type]" id="listing_property_type">
<option value="1">Apartment</option>
<option value="2">Commercial</option>
<option value="3">Homes</option>
<option value="4">Roommates</option>
<option value="5">Vacation</option>
</select>
</div>
</div>
</div>

<div id="pbath-footage">
<div id="pbathcont">
<div id="pbathtitle">Bathrooms:</div>
<div id="pbathinput">
<select name="listing[property_type]" id="listing_property_type">
<option value="1">Apartment</option>
<option value="2">Commercial</option>
<option value="3">Homes</option>
<option value="4">Roommates</option>
<option value="5">Vacation</option>
</select>
</div>
</div>
<div id="pfootagecont">
<div id="pfootagetitle">Square Feet:</div>
<div id="pfootageinput"><input type="text" size="10" name="listing[sf]" value="0" id="listing_sf" /></div>
</div>
</div>

<div id="pphotocont">
Upload Photo
</div>

<div id="psubmitcont">
<input type="submit" value="Continue >>">
</div>
</div>

<div id="postfooter"><!-- --></div>

</div>
</form>
</div>

[MartinWeb]

Please tell me if any of the following is wrong-

It looks like those two fields are the only fields that do not carry float tags. Because of this, these two div tags go to the top of the page. Try to set the float on these two tags to "inherit". That way, they should see the other tags.

[SuzyUK]

I don't know why IE7 in particular would do this, but it is fixable simply by removing the 30px height off #pdesccont. WE shouldn't really used fixed heights where it is not necessary it can lead. to unexpected things, especially where floats are concerned, my rule of thumb, if floating, go with the flow (be laid back) and ease up the restrictions ;)

i think i pretty much set up the whole thing the wrong way

There are many ways to do the same thing when it comes to CSS, so don't worry there's not really a wrong way. However as you're new I would say you are using way too many divs and ID's and not using the HTML elements for the job ;)

And it also gives me a chance to tell you about my new love for forms..
I'm in love with display: inline-block;

Previously before support for this property became better (FF, not IE this time!) floats was one of the better methods for this job.

When it comes to HTML Forms [w3.org] the elements for the job are <label> and <input>, <select>, <textarea>, there is no need to wrap each element in a div, especially not all with their own individual ID. ID's are used to identify a particular area on a page. Classes should do be used and reused for the heavy lifting (repetitive) work.

In saying that forms are inextricably linked by the inputs ID. The name attribute is being deprecated in favour of the ID, although both should still be used for back compat, and then the label is linked to the control via the ID too, so both name/ID should be the same for ease.

so for example, the followong code does the job of connecting the label and form control properly:

<label for="listing-title">Title:*</label>
<input type="text" name="listing-title" value="" id="listing-title" />

- note if you click anywhere on the label it will focus it's related input, which is the accessibility part of forms, which a div can't do. So imagine if you can make the label as wide as left alignment "column" that makes things really easy for some users (I use this fact heavily in an accounts software application as I hate trying to hit the little checkboxes.. but I digress)

You could give the label an ID too, but there's no need to. The wrapper divs you have which are identifying each part of your form are enough to target the label inside it if necessary, the inputs can be be targetted by their own ID, (form control name) or via their parent wrapper too.

So, all you need to be able to target all your code above is e.g.

<div id="ptitlecont">
<label for="listing-title">Title:*</label>
<input type="text" name="listing-title" value="" id="listing-title" />
</div>

I reduced the HTML for this form by about 30 lines, but it could likely still be more.

The CSS? well there is just way too much up there in that post, although it works fine.. how would you like to reduce it from 300 lines to 60?

Did I mention I'm in love with display:inline-block; for forms ;))

here's what I have (and even it could probably even be reduced further as I left in your wrapper divs which obviously hold your background images:

<div id="postbody">
<form method="post" action="/listing/post">
<div id="postmain">
<h3 id="posttitle">Post a Property</h3>

<div id="postcontent">
<div id="posterror"><span class="errortext">* Street address is invalid</span></div>

<div id="ptitlecont">
<label for="listing-title">Title:*</label>
<input type="text" name="listing-title" value="" id="listing-title" />
</div>

<div id="ptypecont">
<label for="listing-property-type">Type:*</label>
<select name="listing-property-type" id="listing-property-type">
<option value="1">Apartment</option>
<option value="2">Commercial</option>
<option value="3">Homes</option>
<option value="4">Roommates</option>
<option value="5">Vacation</option>
</select>
</div>

<div id="pstreetcont">
<label for="listing-address1">Street Address:*</label>
<input class="errorbox" type="text" size="39" name="listing-address1" value="" id="listing-address1" />
</div>

<div id="punitcont">
<label for="listing-address2">Apartment / Unit No:</label>
<input type="text" size="39" name="listing-address2" value="" id="listing-address2" />
</div>

<div id="plocationcont">
<label for="listing-location">Location:*</label>
<input type="text" size="39" name="listing-location" id="listing-location" />
</div>

<div id="pdesccont">
<label for="listing-desc">Description:*</label>
<textarea rows="4" cols="30" name="listing-desc" id="listing-desc"></textarea>
</div>

<div id="ppricecont">
<label for="listing-rent">Price:*</label>
<input type="text" size="10" name="listing-rent" value="0" id="listing-rent" />
</div>

<div id="pbedcont">
<label for="listing-beds">Bedrooms:*</label>
<select name="listing-beds" id="listing-beds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

<div id="pbathcont">
<label for="listing-baths">Bathrooms:</label>
<select name="listing-baths" id="listing-baths">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>

<div id="pfootagecont">
<label for="listing-sf">Square Feet:</label>
<input type="text" size="10" name="listing-sf" value="0" id="listing-sf" />
</div>

<div id="pphotocont">Upload Photo</div>
<div id="psubmitcont"><input type="submit" value="Continue >>"></div>
</div>

<div id="postfooter"><!-- --></div>
</div>
</form>
</div>

The CSS.. start by targetting the main and majority elemenhts first then overrule for specific ones, for example most of your labels all require the same width, there's only the 2-4 in the "tabular" like section that might need changing, so set them all first then get more specific to target the different divs

Using inline-block on both the labels and the inputs/select/textarea will naturally make them sit side by side, and you can give width to an inline block for you nice alignments, also with inline-block, you can vertically align the text in it so we can remove heaps and heaps of the floats and not need to worry about clearance (your IE7 problem?) then the tabular like section for the four smaller inputs, they should be done by floating the parent divs themselves and then targetting those four inputs labels separately to give them different widths as per their content and to keep the alignment of the form looking good.

Too much to explain, so I'll post what I have as an example, and anyone can feel free to ask questions, add more suggestions for improvements - if you want to know more

#postbody {
margin: auto;
background-color: #abc;
width: 980px;
}

#postbody form {margin: 0; padding: 0;}

#postmain {
margin: auto;
width: 420px;
background: #999 url(postcont_02.png) repeat-y 0 0;
}

#postcontent {
width: 400px;
margin: 0 10px;
}

#posttitle {
background: #333 url(postcont_01.png);
color: #fff;
font-size: 16px;
padding: 10px;
margin: 0;
}

#posterror {
color: #f00;
margin: 10px 0 10px 140px;/* adjust as required */
}

.errorbox {border: 1px solid #f00;}

#postfooter {
background: #333 url(postcont_03.png) no-repeat 0 0;
height: 46px;
}

/* general rules */
#postcontent label {
display: inline-block;
width: 140px;
vertical-align: top;
}
#postcontent input, #postcontent textarea, #postcontent select {
display: inline-block;
width: 250px;
margin-bottom: 10px;
}
#postcontent select { width: auto;}

/* specific overrules */
#ppricecont, #pbathcont {float: left; width: 220px;}
#pbedcont, #pfootagecont {float: left; width: 180px;}

#ppricecont input, #pfootagecont input {width: 60px;}

#pfootagecont label {width: 110px;}

/* footer inputs */
#pphotocont,#psubmitcont {margin: 10px 0; text-align: right; clear: both;}
#psubmitcont input {width: auto;}

I also took the heading out of a div into a heading element, (you may need some adjustment to padding, to make your background fit) I moved the main background onto the outer div so the #postcontent div could control the internal 'padding' (using width/margins) to save putting it on every inner div

anyway hope it is helpful, and ask away
Suzy

[mgmuranaka]

Oh my goodness, thank you all so much! I was expecting maybe 1 response, but Suzy, you are amazing! I haven't had a chance to go through all of the code you fixed, but your explanations helped alot. Right after I finished this the first time I was kind of slapping myself for always forgetting to use classes. Thank you SO much for going to all that trouble. I think this is my new favorite forum!