www.webdeveloper.com
Results 1 to 7 of 7

Thread: Small Firefox input button CSS styling issue?

  1. #1
    Join Date
    Nov 2007
    Posts
    38

    Small Firefox input button CSS styling issue?

    Hi Guys!

    I have the following class defined for a submit button.

    .InputButtonTest
    {
    width: 90px;
    color: White;
    background: #022F68;
    height: 19px;
    font-size: 13px;
    border: 1px solid #022F68;
    line-height: 8px;
    }

    The button looks good in IE7/8 + Chrome, however in Firefox it appears the text for the button value is being pushed down. I need to keep the actual pixel height of the element at 19px, but can someone suggest a fix for Firefox?

    Thank you very much!

  2. #2
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    why line-height: 8px?

  3. #3
    Join Date
    Nov 2007
    Posts
    38
    If you remove the line height in IE7/IE8 things get out of wack. Try it and let me know if you are seeing different results if you can.

    Thank you very much!

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Agree with dtm's implication, get rid of the line-height and align the text using padding-top. Important to note, when you add a padding-top, this must be subtracted from the height value to maintain the 19px height of your button.

    I would try this, for starters, but you might need to mess with it.

    Code:
    .InputButtonTest
    {
    width: 90px;
    color: White;
    background: #022F68;
    height: 16px;
    font-size: 13px;
    border: 1px solid #022F68;
    padding-top: 3px;
    }
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Nov 2007
    Posts
    38
    Thank you for the suggestion. Unfortunately a padding top just appears to push the text off the button. Are you seeing different results? Any other suggestions to get this worked out?

    Thank you!

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    My bad, buttons act differently (or at least appear to in my current testing/state of exhaustion) than what I was thinking. Replace padding-top with padding-bottom and it is the best you can do with a restricted 19px high button with 13px high text.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    May 2010
    Posts
    1
    Try this in your CSS if it is a <button>...

    button::-moz-focus-inner { padding:0 !important; }

    ...or if it is an <input type="button">

    input[type="button"]::-moz-focus-inner { padding:0 !important; }


    Should fix the padding problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles