...

View Full Version : Aligning Form Elements - input text and drop down list



niemie
07-18-2005, 09:51 PM
For some reason, I cannot get my 2 form elements (text area and drop down)to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas?


input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}

hemebond
07-18-2005, 10:22 PM
http://www.w3.org/TR/REC-CSS1#vertical-align

niemie
07-18-2005, 10:48 PM
That might align them but the heights of the text box and drop down box are still different....

_Aerospace_Eng_
07-18-2005, 11:24 PM
I do believe there is some sort of default margins and padding on the select box, have you messed with the margin and padding for those elements.

niemie
07-18-2005, 11:43 PM
Right you are, I gave the text area a padding of 1px and it lined the two boxes right up.... my question now is, why does IE not see these styles? It looks just like I want it to in FF - but IE seems to just display defaults (text style, etc) and for some reason seems to put a blue border on the dropdown.

My code is now:


input[type="text"], select {
color:#888888;
font-size:9px;
}
input[type="text"] {
padding:1px;
}

Two attached images show what I mean...

_Aerospace_Eng_
07-18-2005, 11:48 PM
I don't think IE is understanding this
input[type="text"]
If you take out [type="text"] the styles should work. But now this will be applied to all of your inputs so you might have to make a class for the ones that you want this to apply to.

niemie
07-19-2005, 03:11 AM
Good call - IE wasn't getting it but Firefox was. IE still, for some reason, puts the border of the drop down box as blue though. Then the only other thing I can't figure is the button image I made lines up fine in IE but in Firefox it does not center.

The CSS I have is:


form {
margin-top:0px;
}
.form {
margin:3px 2px 0 2px;
vertical-align:middle;
}
.inputtext {
color:#888888;
font-size:9px;
}
.inputpadding {
padding:1px;
}

The Form code is:

<div class="form">
<form method="post" action="https://secure.ricochetnetwork.com/order/orderwiz.php">
<input type="hidden" name="v" value="enter your order group value here">
<input type="hidden" name="submit_domain" value="register">
<input type="text" name="domain" value="www." size="15" class="inputtext inputpadding">
<select name="tld_extension" class="inputtext">
<option value="com">.com&nbsp;&nbsp;</option>
<option value="net">.net </option>
<option value="org">.org </option>
<option value="info">.info </option>
<option value="biz">.biz </option>
</select>
<input type="image" src="images/button_go2.gif" name="submit" value="Lookup Domain">
</div>

_Aerospace_Eng_
07-19-2005, 04:12 AM
Is there any way you can give us a link to these pages? These snippets are okay but something else could be factoring into the problem.

niemie
07-19-2005, 05:21 PM
Yeah sure

_Aerospace_Eng_
07-19-2005, 07:32 PM
Since your input image is fine in IE, add this to your CSS

input[type=image]{
position:relative;
top:3px;
}
IE won't see it which you already know, and it fixes the alignment in FF.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum