...

View Full Version : vertical align text in <input type="text" />; works in all except - Firefox!



croatiankid
12-25-2006, 08:52 PM
I want text that a user enters into an input (text) to be vertically centered. The following works in Opera 9, IE 7, but not firefox!.

#s
{
width:113px;
border:1px solid #7f9db9;
height:20px;
font:bold 14px/20px Geneva, Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#555;
}

<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
I don't know how it looks in IE6, but I'd like it to work there too (obviously).
thanks in advance as always.

BTW the problem in FF is that the text appears a few px above the middle

croatiankid
12-25-2006, 08:58 PM
I just tried

#s
{
width:107px;
border:1px solid #7f9db9;
height:20px;
font:bold 14px/14px Geneva, Arial, Helvetica, sans-serif;

color:#555;
padding:3px 3px;
},
and the same problem occures

croatiankid
12-26-2006, 07:41 PM
Any ideas? I've noticed some other inconsistencies between Opera and FF, but found work-arounds for them

_Aerospace_Eng_
12-26-2006, 07:52 PM
What is your reasoning for setting a height on the input? If you took away the height and just used top and bottom padding it would appear vertically aligned. The styling of inputs is very limited when it comes to certain browsers.

croatiankid
12-26-2006, 10:49 PM
that did it. and then I had to take the line height out to make it right in IE. thanks :)

questionable
12-29-2009, 04:52 PM
For Firefox, you can use
-moz-transform: rotate(-90deg);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum