View Full Version : <input> text "box" size different in IE

04-05-2011, 03:15 AM
Hey guys, I ran into a little problem with the form "box" size being different in IE versus Chrome/FF.


#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;


<div id="header_login">
<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"/>

I included the doctype in my full script.

-Thanks for any help

04-05-2011, 06:23 AM
I could be wrong, I am a noob, but have you tried using <span> </span> to style it?

04-05-2011, 06:34 AM
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

<style type="text/css">
input[type="text"] {
width: 100px;

04-05-2011, 06:52 AM
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.

04-05-2011, 06:58 AM
no problem :)