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!
Click to expand...

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:
Click to expand...

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
Click to expand...

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
Click to expand...

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
Click to expand...

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?
Click to expand...

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://
Click to expand...

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

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

Similar Threads

Check forms With JavaScript 1
I dont get this. Please help me!! 2
How to display input options only after selecting an option from the 'select class' tag JS? 6
Need help with code on website (noob) 2
Positioning CSS components 1
Song requests 4
Working on mobile css menu with plenty of frustration! 2
Php modal form to email 1

Members online

Total: 74 (members: 2, guests: 72)
Robots: 313

Forum statistics

Threads
473,982
Messages
2,570,189
Members
46,735
Latest member
HikmatRamazanov

Latest Threads

Top