|
|
Posted by Jonathan N. Little on 01/19/07 14:58
the red dot wrote:
> http://www.mediatech.lincoln.ac.uk/krudeforth/langan/php/subscribe.php
>
> this is driving me nuts, can someone have a look at the link, and tell me
> why the 'email' input area is not aligned correctly in firefox - thank you
> very much in advance.
Well here is a way, just using CSS. I did not try to match your color,
gut got close for the demonstration. Works in real web browsers, (but
surprise, surprise!) bombs in IE. Don't have time today to mess with
this but maybe some else can see what I have overlooked.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Use CSS</title>
<style type="text/css">
BODY { color: #333; background-color: #eee; font-family: sans-serif; }
/* basic for the form */
#subscribe { color: #333; background-color: #aaa; padding: 1em; width:
90%; }
/* get fieldset groups right aligned */
#subscribe FIELDSET { margin: o; padding: .5em; border: 1px solid #eee;
text-align: right; }
/* all inputs in for as block elements with no border */
#subscribe INPUT { display: block; border: 0; }
/* style buttons to align to right side of fieldset */
#subscribe INPUT { margin: .5em 0 auto auto; width: 5em; }
/* make labels in fieldset block and set right margin to fit inputs */
#subscribe FIELDSET LABEL { display: block; margin-right: 9.5em; }
/* re-style input boxes within fieldset to align with lables */
#subscribe FIELDSET INPUT { display: block; margin: -1.25em 0 auto
auto; width: 11em; }
</style>
</head>
<body>
<p>A better way with CSS</p>
<form id="subscribe" method="post" action="" class="subscribe">
<fieldset>
<legend>Personal information</legend>
<label for="forename">First name</label>
<input name="forename" id="forename" size="20" maxlength="20"
type="text">
<label for="surname">Surname</label>
<input name="surname" id="surname" size="20" maxlength="20"
type="text">
<label for="email">Email</label>
<input name="email" id="email" size="20" maxlength="30" type="text">
</fieldset>
<fieldset>
<legend>Password</legend>
<label for="password">Choose a password</label>
<input name="password" id="password" size="20" maxlength="20"
type="text">
<label for="confirm">Confirm password</label>
<input name="confirm" id="confirm" size="20" maxlength="20"
type="text">
</fieldset>
<input name="Submit" value="Submit" type="submit">
<input name="reset" value="Reset" type="reset">
</form>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|