Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Problem formatting forms w/ floats (http://www.velocityreviews.com/forums/t592168-problem-formatting-forms-w-floats.html)

clumsy_ninja 02-16-2008 08:19 PM

Problem formatting forms w/ floats
 
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>

Adrienne Boswell 02-17-2008 12:12 AM

Re: Problem formatting forms w/ floats
 
Gazing into my crystal ball I observed clumsy_ninja
<lastsliver@yahoo.com> writing in news:118b27a8-bf0b-45e0-9ca0-
604c110d6b5e@34g2000hsz.googlegroups.com:

> 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.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share


Jukka K. Korpela 02-17-2008 10:56 AM

Re: Problem formatting forms w/ floats
 
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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/



All times are GMT. The time now is 08:03 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.