PDA

View Full Version : Laying out out a form with a definition list



pinguino
25 Nov 2008, 07:26 AM
Hi all,

As the title suggests, I'm having a bit of trouble laying out a form using a definition list - I know this is not everyone's preferred markup, sorry if it's offensive to some readers

The starting point for this code was an example in Simon Collison's book Beginning CSS Development, as far as I remember.

It behaves as I would like it to on Safari and Firefox, but IE6/7 cause the input fields to appear below the label, as opposed to next to them. It seems that whereas FF and Safari float the <dt>s to the left meaning the end up within the <dd>, IE doesn't allow the <dt> to sit inside the <dd>.

I've placed a copy of the page at http://www.odetobrokenthinking.com/form.html.

Here's the code, with the styles embedded. Ignore the IE specific stuff, it's just to get the background color on the fieldset to behave. I've left the section in to make it easier to add IE specific code.

I'd really appreciate some help with this - I've been tinkering with it but I don't want to fix it by accident without understanding what the problem was.

Cheers,
P

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Playground</title>

<style type="text/css">
form {
margin: 0;
padding: 0;
}

fieldset {
width:470px;
padding: 5px;
border: 1px solid #333;
background-color: #DDDDDD;
display: block;
}

legend {
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #FFF #AAA #666 #FFF;
font-weight: bold;
}

fieldset dt {
float: left;
width: 150px;
padding: 5px;
}

label {
font-weight: bold;
}

fieldset dd {
margin: 0;
padding: 5px;
width: 450px;
}

#title, #name, #email, #message {
width: 280px;
}

input, textarea {
border: 3px double #333;
}
</style>

<!--[if IE]>

<style type="text/css">
fieldset {
position: relative;
padding-top: 0.75em;
}

legend {
position: absolute;
top: -.6em;
left: .5em;
}
</style>
<![endif]-->
</head>
<body id="index" onload="">
<h1>Form Land</h1>

<form id="comment" action="/comments/" method="post">
<p>Fields marked * are compulsory</p>
<fieldset id="feedback">
<legend>Feedback</legend>
<dl>
<dt><label for="title">Title:</label></dt>
<dd><select id="title" name="title" tabindex="1">
<option selected="selected">Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select></dd>
<dt><label for="name">Name:</label></dt>
<dd><input id="name" name="name" type="text" tabindex="2" /></dd>
<dt><label>Email:</label></dt>
<dd><input id="email" name="email" type="text" tabindex="3" /></dd>
<dt><label for="message">Message or enquiry</label></dt>
<dd><textarea name="message" id="message" rows="11" cols="30" tabindex="4"></textarea></dd>
<dt><label for="updates">I would like to receive updates: </label></dt>
<dd><input type="checkbox" name="updates" id="updates" value="n" tabindex="5" /></dd>
</dl>
</fieldset>
<input type="submit" value="Send Feedback" />
</form>
</body>
</html>