Problem formatting forms w/ floats

C

clumsy_ninja

I've been trying to format my form several different ways with floats:
1. no speacial markup used = input elements don't clear in IE
2. adding a br element after each input element
3. using <li> elements to group the <label> and <input> = li elements
indent oddly in Firefox

Using br elements works, but is there was a way to do this without
using extra markup like tables and br elements? Is there a CSS-only
solution to this problem?

TIA for any help!




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input,
label {
float: left;
display: block; /* unneeded? */
width: 4em;
}

input {
margin-bottom: 1em;
width: 10em;
}

label {
clear: left;
width: 8em;
margin-right: 1em;
text-align: right;

background-color: #FFCC33;
}

ul { list-style: none; }

</style>

</head>

<body>

<fieldset>
<legend>Contact Information</legend>
<form>
<label for="name_data1">Name</label>
<input name="name_data" id="name_data1" type="text" />

<label for="name_data2">Name</label>
<input name="name_data" id="name_data2" type="text" />

<label for="name_data3">Name</label>
<input name="name_data" id="name_data3" type="text" />
</form>
</fieldset>

<fieldset>
<legend>Contact Information (using br)</legend>
<form>
<label for="name_data6">Name</label>
<input name="name_data" id="name_data6" type="text" /><br />

<label for="name_data7">Name</label>
<input name="name_data" id="name_data7" type="text" /><br />

<label for="name_data8">Name</label>
<input name="name_data" id="name_data8" type="text" /><br />
</form>
</fieldset>

<fieldset>
<legend>Contact Information (using ul)</legend>
<form>
<ul>
<li>
<label for="name_data11">Name</label>
<input name="name_data" id="name_data11" type="text" />
</li>
<li>
<label for="name_data12">Name</label>
<input name="name_data" id="name_data12" type="text" />
</li>
<li>
<label for="name_data13">Name</label>
<input name="name_data" id="name_data13" type="text" />
</li>
</ul>
</form>
</fieldset>

</body>
</html>
 
A

Adrienne Boswell

Gazing into my crystal ball I observed clumsy_ninja
I've been trying to format my form several different ways with floats:
1. no speacial markup used = input elements don't clear in IE
2. adding a br element after each input element
3. using <li> elements to group the <label> and <input> = li elements
indent oddly in Firefox

Using br elements works, but is there was a way to do this without
using extra markup like tables and br elements? Is there a CSS-only
solution to this problem?

TIA for any help!

You could check http://intraproducts.com/usenet/requiredform.asp and see
if that's any help.

Also, it's better to post a URL than markup.
1) It's easier for someone here to help you as they do not have to open
up and editor and copy/paste your markup
2) You may have omitted something in your post that effects the page in
question.
 
J

Jukka K. Korpela

Scripsit clumsy_ninja:
I've been trying to format my form several different ways with floats:

Why? What would you like to float and why? What's the real problem or
purpose, as opposite to an assumed CSS solution of using "floats"?
1. no speacial markup used = input elements don't clear in IE

What? Oh, you mean line breaks. Use block-level markup for things that
should have line breaks before and after.
2. adding a br element after each input element

Well, that's a clumsy though feasible way, too.
3. using <li> elements to group the <label> and <input> = li elements
indent oddly in Firefox

Somewhat odd markup, but possible. It's not commonly used. If you use
it, you probably want to kill the bullets using list-style: none in CSS,
and you should set all margin and padding properties both for <ul> and
for <li> elements there.

Choose your markup, then explain what problems you have with it, and
post the URL.
Using br elements works, but is there was a way to do this without
using extra markup like tables and br elements? Is there a CSS-only
solution to this problem?

Do you mean that you would want the labels and fields to appear
consecutively, with browser-generated line breaks at random points, when
your style sheet is not applied? I'm afraid you've missed the CSS
Caveats:
http://www.cs.tut.fi/~jkorpela/css-caveats.html

A table is the most flexible approach, if you want tabular appearance of
labels and fields, since then you won't need to make a guess on how wide
the label elements need to be. See
http://www.cs.tut.fi/~jkorpela/forms/tables.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://

Why? Which part of XML, as opposite to SGML, are you making use of?
<fieldset>
<legend>Contact Information</legend>
<form>

The fieldset logically belongs inside the form. I don't know what
happens in different browsers if you nest them in an illogical way, and
I think I don't want to know that.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top