1 reply [Last post]
Kenji Miyamoto
Offline
Regular
Last seen: 14 years 39 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

Hello,

I am having a bit of trouble with positioning form elements. You see, I'm floating the <label>s and <inputs>s, but the <label>s' text doesn't stay in alignment, causing the last two bits of text next to the <input>s to be a bit higher. Here's the final HTML code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<meta http-equiv="Content-Script-Type" content="application/x-javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<script type="application/x-javascript">
	var uns = 0;
	</script>
	<title>Comments</title>
	<link rel="stylesheet" href="comm.css" />

	<link rel="stylesheet" href="post.css" />
</head>
<body xml:lang="en-US">
<div id="body">
	<div class="post" xml:lang="en-US" id="d07-15-2005" title="July 15th, 2005">
	<h2 class="title">07-15-2005:July 15<sup>th</sup>, 2005</h2>
	<p class="d">It all started out at <span class="hide">my high school</span>, where we were having a freaky class election.  The 'chips' used in either ballet box were gumballs.  I was on one side's 'staff'.  Well, both sides went through a huge war, but ended up reconciling our differences.  It was just like something out of a TV show.  I got to chew the huge gumball we ended up with, though.  Somehow, I ended up as the audience of a three-dimensional <dfn title="A famount TV scientist from around here.">Bill Nye</dfn> video.  Later, I had come to <span class="hide">my high school</span> for some freaky History class.  <span class="hide">my friend</span> and a couple of his brothers, neither of which exist in real life, were there.  The taller one wasn't too nice to me.  We all then got into our circle and read out of our 'history' books, and read about some time in Africa.  I ended up in that time.</p>

	<p class="n">Sorry about not posting in five days; I've been rather busy with Linux.</p>
	<p class="h">I really didn't do too much today.  For the majority, I worked on several attempts at <a href="http://www.linuxfromscratch.org" title="Linux From Scratch">LFS</a>.  <em>I <strong>always</strong> got an error that a header file was missing when compiling GCC in the environment after 'chroot'.  Though, every file it that it said didn't exist did exist.</em>  I also did a bit of site modification, which is mostly unnoticable.  Later, I tired of the LFS failures, so I started work on <a href="http://os.inf.tu-dresden.de/L4/LinuxOnL4/">L4Linux</a>.  Sadly, the CVS server seems to be having a few problems.</p>
	<span class="sign" xml:lang="ja" title="Kenji Miyamoto">- 宮本憲二</span>

	<a href="comments.php?date=07-15-2005" class="comment">Comments</a>
</div>
<div id="commentContainer">
	<h2 title="This page has been viewed, but no comments have added.">No Comments</h2>
</div>
<form id="commForm" action="commentpost.php" method="POST">
	<fieldset id="details">
		<legend>Details about the post.</legend>
		<div>

			<label for="title">Title</label>
			<input id="title" name="title" />
		</div>
		<hr />
		<div>
			<label for="name">Name</label>
			<input id="name" name="name" />
		</div>

		<hr />
		<div>
			<label for="email">E-mail</label>
			<input id="email" name="email" />
		</div>
		<hr />
		<div>
			<label for="url">Site URL</label>

			<input id="url" name="url" value="http://" />
		</div>
		<input type="hidden" name="date" value="07-15-2005" />
		<hr />
	</fieldset>
	<fieldset id="comment">
		<legend>Your comment.</legend>
		<textarea id="comment" name="comment" cols="50" rows="2" />

		<hr />
	</fieldset>
	<fieldset id="submitSet">
		<legend>Glick to submit</legend>
		<input id="submit" name="submit" type="submit" value="Submit!" />
		<hr />
	</fieldset>
</form>
<hr />

</div>
</body>
</html>
Here is the CSS file in question:
@charset "UTF-8";
body {
	padding:0.5em;
	margin:0;
	min-height:80em;
	background-color:rgb(240,255,240);
}
div#commentContainer {
	padding:0.25em;
	border:2px solid rgb(90,90,120);
	margin-bottom:0.5em;
	background-color:rgb(240,240,255);
}
div#commentContainer h2 {
	text-align:center;
	color:rgb(50,50,100);
	font:bolder normal 2.5em/1.1 Freestyle Script, URW Chancery L, Lucida Calligraphy, Bookman Old Style, monospace;
	padding:0;
	margin:0.25em;
}
form#commForm {
	margin:0;
	padding:0.25em;
	border:2px solid rgb(120,90,90);
	background-color:rgb(255,240,240);
}
form#commForm fieldset {
	border:none;
	display:block;
	width:60%;
	margin:0 auto;
	padding:0.25em;
}
form#commForm fieldset legend {
	display:none;
}
form#commForm fieldset#details div label {
	float:left;
	text-align:right;
	display:block;
	width:15%;
	margin:0 1% 0 0;
}
form#commForm fieldset#details div input {
	display:block;
	float:right;
	width:83%;
}
form#commForm fieldset#comment textarea {
	margin:0.25em auto;
	display:block;
}
form#commForm fieldset#submitSet input#submit {
	margin:0.25em auto;
	display:block;
}
hr {
	clear:both;
	visibility:hidden;
	height:0;
	border:none;
	padding:0;
	margin:0;
	width:auto;
}
I wish to have the <inputs> and <label>s aligned, as if in a table, without the use of a table. Is this possible in this case? If so, how?

NOTE: I've only tested this in Firefox. Since IE7 is going to fix the CSS rendering issues, I just let it have the code in HTML4.01 form, along with any other non-XHTML browsers.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

&lt;hr /&gt; Doesn't Clear Both

This is an approach I've used;

      <label for="fname"><span class="
             req">First Name:</span><input type="text"
             id="fname"
             value="" /></label>

      <label for="lname"><span class="
             req">Last Name:</span><input type="text"
             id="lname"
             value="" /></label>
-------------
label {
    font-size: 0.9em;
    font-variant: small-caps;
    margin-bottom: .25em;
    cursor: pointer;
    }

label span {
    width: 48%;
    float: left;
    text-align: right;
    margin-right: 1em;
    padding-top: .3em;
    }

You can see this in action at http://garyblue.port5.com/webdev/form.html

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.