Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Aligning Form Elements - input text and drop down list

    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?

    Code:
    input[type="text"], select {
      color:#888888;
      font-size:10px;
      height:auto;
      }
    Attached Thumbnails Attached Thumbnails Aligning Form Elements - input text and drop down list-form_elements.gif  

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That might align them but the heights of the text box and drop down box are still different....

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    input[type="text"], select {
    	color:#888888;
    	font-size:9px;
    	}
    input[type="text"] {
    	padding:1px;
    	}
    Two attached images show what I mean...
    Attached Thumbnails Attached Thumbnails Aligning Form Elements - input text and drop down list-ff.gif   Aligning Form Elements - input text and drop down list-ie.gif  

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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:
    Code:
    <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>
    Attached Thumbnails Attached Thumbnails Aligning Form Elements - input text and drop down list-ie_button.gif   Aligning Form Elements - input text and drop down list-firefox_button.gif  

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah sure
    Last edited by niemie; 07-20-2005 at 12:59 AM.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Since your input image is fine in IE, add this to your CSS
    Code:
    input[type=image]{
    position:relative;
    top:3px;
    }
    IE won't see it which you already know, and it fixes the alignment in FF.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •