...

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



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

css



#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



<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

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

bullant
04-05-2011, 05: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;
}
</style>

Aurora.Light
04-05-2011, 05: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.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum