text and textboxes position 2

[delpierro]

How can i place all the textboxes at the same left-margin?

This is the css:

p {
	margin-left: 40px;
	}
input {
	margin-left: 150px;
	}

this is the html:

<p>
Adress:<input type="text" name="T1" size="20"><br>
Name:<input type="text" name="T2" size="20"><br>
Age:<input type="text" name="T3" size="20">
</p>

 

[Vragabond]

You can't really, doing it like that. Because your labels will always vary in length. That is why you should use <label> tags and specify a width to the labels. More good things will come from using labels.

See it here in action:

http://www.themaninblue.com/experiment/InForm/margin.htm

 

[delpierro]

Thanks Vragabond

I did it like this:

label {
	clear: both;
	float: left;
	display: block;
	width: 15em;
	margin-top: -1em;
	font-weight: bold;
	}
	
	input {
	position: relative;
	top: -1.4em;
	left: 8em;
	display: block;
	}
<label for="T1">Adress:<input type="text" name="T1" size="20"></label>
<label for="T2">Name:<input type="text" name="T2" size="20"></label>
<label for="T2">Age:<input type="text" name="T3" size="20"></label>

 

[delpierro]

But why is the length of the label in IE perfect, and in Mozilla FireFox to short?

any idea?

 

[Foamcow]

Instead of specifying a size attribute in the input tag, try specifying one in the CSS for the input element.

I never really understood how that size attribute would be calculated since most fonts aren't fixed-width. Each character can be a different width so what unit does the size attribute use? The only one that would make sense would be an em but since this varies depending on font you can't ever guarantee the width of the box.


So... specify the input width in pixels in your CSS

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[delpierro]

I tried your solution Foamcow, but no luck
this is what i changed:

label {
    clear: both;
    float: left;
    display: block;
    width: 15em;
    margin-top: -1em;
    font-weight: bold;
    }
    
    input {
    position: relative;
    top: -1.4em;
    left: 8em;
    display: block;
    [COLOR=red]width: 15em;[/color]
    }
<label for="T1">Adress:[COLOR=red]<input type="text" name="T1">[/color]</label>
<label for="T2">Name:[COLOR=red]<input type="text" name="T2">[/color]</label>
<label for="T2">Age:[COLOR=red]<input type="text" name="T3">[/color]</label>

 

[Foamcow]

Try

<label for="T1">Address:</label><input type="text" name="T1" />
<label for="T2">Name:</label><input type="text" name="T2" />
<label for="T2">Age:</label><input type="text" name="T3" />

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

Actually, your version works perfectly anyway.
Are you using a DocType?
Why have you set a -1em margin-top ?

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[delpierro]

I tried:

<label for="T1">Address:</label><input type="text" name="T1" />
<label for="T2">Name:</label><input type="text" name="T2" />
<label for="T2">Age:</label><input type="text" name="T3" />

and....it worked. Now IE and FF or exactly the same.

Many thanks for your help and time