Chiwda
Reputation: 1344
Forms split across DIVs - CSS doesn't work
I have a form that doesn't end before the DIV tag it is in ends. It validates fine in CSS and HTML validators, but I am having a problem with the CSS of some of the fields. If you see the HTML, I have split the form into two columns. The form and fieldset tags start in the left column and are closed in the right column. For some reason, the CSS doesn't seem to apply to the fields in the right columns.
This SO Question and it's answers don't have a solution for my problem.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/new.css" type="text/css" media="all">
</head>
<body>
<div class="container_24">
<article id="content">
<ul>
<li id="Shipping">
<div class="wrapper baseform line2">
<div id="information">
<span class="bg"></span>
</div>
<div class="grid_6 prefix_1 omega">
<h2>Shipping & Billing</h2>
<form action="billing.php#!/Billing" method="post" id="GenericForm">
<fieldset>
<h3>Shipping Information</h3>
<div class="wrapper">
<div class="floatleft">
<label id="lblfname">
<span class="bg"><input id="fname" name="fname" type="text" value="" placeholder="First Name:" class="input"></span></label></div>
<div class="floatleft">
<label id="lbllname">
<span class="bg"><input id="lname" name="lname" type="text" value="" placeholder="Last Name:" class="input"></span></label></div>
<div class="floatleft">
<label><span></span></label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblEmail">
<span class="bg"><input id="Email" name="Email" type="text" value="" placeholder="Email:" class="input"></span>
<span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label>
</div>
<div class="floatleft">
<label id="lblMobilePhone">
<span class="bg"><input id="MobilePhone" name="MobilePhone" type="text" value="" placeholder="Mobile Phone:" class="input"></span>
<span class="error">*This is not a valid phone number.</span></label></div>
<div class="floatleft">
<label id="lblOtherPhone">
<span class="bg"><input id="OtherPhone" name="OtherPhone" type="text" value="" placeholder="Other Phone:" class="input"></span>
<span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblAddress1">
<span class="bg"><input id="Address1" name="Address1" type="text" value="" placeholder="Address Line1:" class="input"></span>
<span class="error">*This is not a valid URL.</span> <span class="empty">*This field is required.</span> </label></div>
<div class="floatleft">
<label id="lblAddress2">
<span class="bg"><input id="Address2" name="Address2" type="text" value="" placeholder="Address Line2:" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCity">
<span class="bg"><input id="City" name="City" type="text" value="" placeholder="City:" class="input"></span></label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblState">
<span class="bg"><input id="State" name="State" type="text" value="" placeholder="State:" class="input"></span>
<span class="error">*This is not a valid URL.</span> <span class="empty">*This field is required.</span> </label></div>
<div class="floatleft">
<label id="lblPostalCode">
<span class="bg"><input id="PostalCode" name="PostalCode" type="text" value="" placeholder="PostalCode:" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCountry">
<span class="bg"><input id="Country" name="Country" type="text" value="" placeholder="Country:" class="input"></span></label></div>
</div>
</div>
</div>
<div id="showright">
<div id="messages">
<h3>Billing Options</h3>
<div class="wrapper">
<input type="radio" name="radio" id="PayWPayPal" value="PayWPayPal"><label for="PayWPayPal">Pay using PayPal Balance</label>
<br />
<input type="radio" name="radio" id="PayWCC" value="PayWPayPal"><label for="PayWCC">Pay using Credit Card</label>
</div>
<div id="CCFields">
<div class="wrapper">
<div class="floatleft">
<label id="lblCCType">
<span class="bg"><select>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="Amex">Amex</option>
<option value="Discover">Discover</option>
</select></span> </label></div>
<div class="floatleft">
<label id="lblCCNum">
<span class="bg"><input id="CCNum" name="CCNum" type="text" value="" placeholder="xxxx xxxx xxxx xxxx" class="input"></span> </label></div>
</div>
<div class="wrapper">
<div class="floatleft">
<label id="lblCCExpiration">
<span class="bg"><input id="CCExpiration" name="CCExpiration" type="text" value="" placeholder="MM/YY" class="input"></span></label></div>
<div class="floatleft">
<label id="lblCVV">
<span class="bg"><input id="CVV" name="CVV" type="text" value="" placeholder="CVV" class="input"></span></label></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="btns"><strong><input name="Pay" type="submit" class="button1" value="Confirm Quantities and Pay"></strong></div>
</div>
</fieldset>
</form>
</div>
</li>
</ul>
</article>
</div>
</body>
</html>
And the CSS:
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, keygen,label, legend, li, meter, nav,
object, ol, output, p, pre, progress,
q, s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style: none;
}
* { border:none}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}
.relative{ position:relative;}
body{ background: url(../images/bg.gif) center top repeat #100f10; border:0; font:13px Arial, Helvetica, sans-serif; color:#717171; line-height:22px; min-width:960px; overflow:hidden}
.container_24 {
margin-left: auto;
margin-right: auto;
width: 1260px;
height:50px;
}
h2{ font-size:25px; color:#26251e; line-height:1.2em; padding: 0 0 27px 0; letter-spacing:-1px;}
.grid_6,
.grid_24 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.container_24 .prefix_1 {
padding-left:40px;
}
.floatleft {
width: 260px;
float: left;
margin: 5px;
}
.floatright {
float: right;
margin: 5px;
}
#showright {
float:right;
width:390px;
margin:2px;
position:relative;
}
.baseform {
width:850px;
float:left;
}
#messages {
height:200px;
margin:100px 30px;
}
#information {
z-index:9;
background-color:#FFFF99;
height:200px;
width:200px;
position:absolute;
display:none;
}
#content > ul{ margin:0 7px 0 5px; position:relative; margin-top:0px; z-index:1;}
#content > ul > li{ background:#fafafa; height:556px; width:100%; padding-top:60px; position:relative;}
.label { margin:0; width:320px; height:17px; background:#CCC; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
.line2{ background:url(../images/line_vert1.gif) 845px 0 repeat-y;}
#GenericForm{ padding-top:7px; position:relative;}
#GenericForm .wrapper{ overflow:inherit; min-height:37px; width:900px;}
#GenericForm .success{ padding:15px 30px; display:none; background:#26251e; color:#fff; top:150px; left:0; right:0; position: absolute; z-index:2}
#GenericForm label{ position:relative;min-height:31px; display: inline-block; z-index:1;}
#GenericForm .message{ height:250px;}
#GenericForm span{ display:block}
#GenericForm .error, #GenericForm .empty{ font-size:10px; color:#26251e; line-height:14px; display:none; width:100%}
#GenericForm a{ margin-right:15px; float: left; width:63px; text-align:center}
#GenericForm .input { margin:0;width:204px; height:17px; background: none; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm .inputoptional { margin:0;width:204px; height:17px; background: #FFC; padding:6px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm textarea { overflow: auto; margin:0;width:204px; height:258px; background: none; padding:7px 12px;color:#717171; font:13px Arial, Helvetica, sans-serif;}
#GenericForm .bg{ background:#f2f2f2; border:1px solid #fff; border-top:1px solid #c4c4c4; border-left:1px solid #c4c4c4; float:left;}
.button1{ display:inline-block; font-size:12px; color:#fff; text-transform:uppercase; line-height:33px; position:relative; background:#393436;}
.button1:hover{ color:#FF9}
.button1 span{ position: absolute; top:0; left:0; width:100%; height:100%; background:#e54d26}
.button1 strong{ position:relative; padding:0 11px;}
So how do I fix this? Is there something wrong in the layout I am using. Please note that the actual page is more complex (and is in PHP), I have extracted some of it to demonstrate the problem.
Upvotes: 0
Views: 337
Answers (1)
kojow7
Reputation: 11384
The problem:
It is illegal syntax to close a parent element before its child elements are closed. When working with HTML it is important to always follow a LOFC (Last Opened First Closed) approach.
The solution:
Make the <form> element the parent rather than the divs. It is perfectly fine to place nearly all of your elements inside of the form element.
Upvotes: 3