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 5 of 5
  1. #1
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts

    <input> text "box" size different in IE

    Hey guys, I ran into a little problem with the form "box" size being different in IE versus Chrome/FF.

    css

    Code:
    #header_login form {
    	font: inherit; <!-- tried this -->
    	display: inline-block; <!-- tried this -->
    }
    
    #header_signup {
    	font-size: 11px;
    	position: relative;
    	left: 8px;
    	overflow: hidden;
    }
    
    #header_signup ul {
    	list-style: none;
    }
    
    #header_signup li {
    	display: inline;
    	border: solid;
    	border-width: 0px 1.1px 0px 0px;
    	border-color: grey;
    	padding: 0px 6px 0px 2px;
    }
    
    #header_signup a {
    	text-decoration: none;
    	color: #595454;
    }
    
    #header_signup a:hover {
    	text-decoration: underline;
    }
    html

    Code:
    <div id="header_login">
       <form>
          <input type="text" name="username" size="10px" maxlength="16"/>
          <input type="text" name="password" size="10px" maxlength="24"/>
          <input type="submit" name="submit" value="Login"/>
       </form>			 
    </div>
    I included the doctype in my full script.

    -Thanks for any help
    Last edited by Aurora.Light; 04-05-2011 at 02:22 AM.

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    I could be wrong, I am a noob, but have you tried using <span> </span> to style it?

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    The size attribute specifies how many characters should be visible, not the width of the element in px.

    Try removing the size attribute and inserting this css

    Code:
    <style type="text/css">
                input[type="text"] {
                    width: 100px;
                }
    </style>
    Last edited by bullant; 04-05-2011 at 05:37 AM.

  • Users who have thanked bullant for this post:

    Aurora.Light (04-05-2011)

  • #4
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    bullant you'd be a genious :P

    I tried width before, but I discovered a nesting error with my divs just now.

    Thanks boywander for the suggestion. Bullant got the head of the nail.
    Last edited by Aurora.Light; 04-05-2011 at 05:54 AM.

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

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