form input question

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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.

Re: form input question

Quoted text here. Click to load it

The first two fields have a <br/> tag after them.  If you add one after the
email field it aligns properly.  F*** knows why!!!


Re: form input question

The Eclectic Electric wrote:
Quoted text here. Click to load it

There are [space] directly after the input-tags for all except for e-mail,
adding one or removing the others trailing [space] will align the input fields.



Re: form input question

Quoted text here. Click to load it
well blow me down and thank you very much... it was about the only thing i
didnt try. cheers.

Re: form input question

the red dot wrote:
Quoted text here. Click to load it

  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.

             " ">
<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; }

<p>A better way with CSS</p>
<form id="subscribe" method="post" action="" class="subscribe">
     <legend>Personal information</legend>
     <label for="forename">First name</label>
     <input name="forename" id="forename" size="20" maxlength="20"

     <label for="surname">Surname</label>
     <input name="surname" id="surname" size="20" maxlength="20"

     <label for="email">Email</label>
     <input name="email" id="email" size="20" maxlength="30" type="text">

     <label for="password">Choose a password</label>
     <input name="password" id="password" size="20" maxlength="20"

     <label for="confirm">Confirm password</label>
     <input name="confirm" id="confirm" size="20" maxlength="20"
    <input name="Submit" value="Submit" type="submit">
    <input name="reset" value="Reset" type="reset">



Take care,


Re: form input question

Jonathan N. Little wrote:
Quoted text here. Click to load it

Type that should be margin: 0;
Quoted text here. Click to load it

Ol' IE has trouble with the negative top margin on the input boxes to
align with will the labels, f*** up the border on the fieldset, remove
the border on the fieldset and looks okay. <sigh> Good old IE!

Take care,


Site Timeline