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 6 of 6
  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

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

    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!.
    Code:
    #s
    {
    width:113px;
    border:1px solid #7f9db9;
    height:20px;
    font:bold 14px/20px Geneva, Arial, Helvetica, sans-serif;
    vertical-align:middle;
    color:#555;
    }
    Code:
    <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
    Last edited by croatiankid; 12-25-2006 at 07:58 PM.

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I just tried
    Code:
    #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

  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Any ideas? I've noticed some other inconsistencies between Opera and FF, but found work-arounds for them

  • #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
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    that did it. and then I had to take the line height out to make it right in IE. thanks

  • #6
    Regular Coder
    Join Date
    Jun 2005
    Posts
    153
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Css for Firefox

    For Firefox, you can use
    -moz-transform: rotate(-90deg);


  •  

    Posting Permissions

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