asked on

CSS Form layout - problem with checkboxes

I am trying to layout a simple form without using tables. I am trying to replicate a two column layout using code based on http://www.themaninblue.com/experiment/InForm/margin_hack.htm. The main labels and text fields seem to work fine, but I am having problems with the checkbox at the bottom. I would like this all on one row, checkbox first and then the label.

HTML

            <form>
            <fieldset>
                        <legend>
                              Contact form</legend>
            <label for="enquiryname" class="first">Name: <strong class="text_red">*</strong>
<input type="text" name="enquiryname" id="enquiryname" value="" size="32" /></label>
<label for="enquiryemail">Email Address: <span class="text_red">*</span>
<input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /></label>
<label for="enquirytelephone">Telephone:
<input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /></label>
<label for="enquiryaddress1"><strong>Address Line 1:</strong><strong class="text_red"> *</strong>
<input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /></label>
<label for="enquiryaddress2">Address Line 2:
<input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /></label>
<label for="enquirytown">Town: <strong class="text_red">*</strong>
<input type="text" name="enquirytown" id="enquirytown" size="32" /></label>
<label for="enquirypostcode">Postcode: <span class="text_red">*</span>
<input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /></label>
<label for="enquirycomments" class="textarea">Comments or questions <span class="text_red">*</span>
<textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea></label>
<label for="enquirynewsletter"><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" />Tick if you wish to receive David Mundell's email newsletters</label>
<input type="submit" value="Send" name="submit" class="submit" />
</fieldset>
</form>

CSS

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
}

input
{
      position: relative;
      top: -1.4em;
      left: 10em;
      display: block;
}

input.submit
{
      clear: both;
      top: 0;
}

label
{
      clear: both;
      float: left;
      display: block;
      width: 10em;
      margin-top: -1em;
      font-weight: bold;
}

label.first
{
      margin-top: 1em;
}

label.textarea {
      clear: both;
      top: 0;
      width: 100%;
}

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Orroland

ASKER

Sean

I realise that nothing is ever perfect, but your code breaks in NN6.

Any other thoughts?

seanpowell

Yes, N6 has a bad bug with labels. I didn't include it as I usually don't try and support that browser - there don;t seem to be many people left using it.
You'll need to add some extra semantic markup to get over that problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">

body
{
      font: 13px verdana, sans-serif;
}

#myform
{
      margin:0;
      padding:0;
      display:inline;
}

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
      margin-bottom:1em;
}

label span
{
      display:block;
      clear: left;
      float: left;
      width: 10em;
      padding: 0px 4px;
      margin:4px 0px 0px 2px;
      font-weight: bold;
}

.red_text
{
      color:red;
      font-weight: bold;
}

label.right
{
      text-align:right;
}

input
{
      margin:4px 0px;
}

.comment
{
      margin:10px 0px;
}

.button
{
      width:80px;
      background-color:#CCC;
      border:1px solid #FC9;
}

</style>
</head>

<body>
<form id="myform">

      <fieldset>
      <legend>Contact form</legend>

      <label for="enquiryname"><span>Name: <strong class="red_text">*</strong></span></label>
<input type="text" name="enquiryname" id="enquiryname" value="" size="32" /><br />

<label for="enquiryemail"><span>Email Address: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /><br />

      <label for="enquirytelephone"><span>Telephone:</span></label>
      <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /><br />

      <label for="enquiryaddress1"><span><strong>Address Line 1:</strong> <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /><br />

      <label for="enquiryaddress2"><span>Address Line 2:</span></label>
      <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /><br />

      <label for="enquirytown"><span>Town: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirytown" id="enquirytown" size="32" /><br />

      <label for="enquirypostcode"><span>Postcode: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /><br />

      <label for="enquirycomments" class="textarea"><span>Comments or questions <strong class="red_text">*</strong></span></label>
<textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea><br />

      <label for="enquirynewsletter" class="right"><span><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" /></span></label>
      <div class="comment">Tick if you wish to receive David Mundell's email newsletters</div></p>

      <label style="border:none;"><span></span></label>
      <input class="button" type="submit" value="Send" name="submit" class="submit" />

</fieldset>

</form>
</body>
</html>