Select box text stuck to top of box in FF

Question

I have a select field and no matter what I do I can't get the text to stop sticking to the top of the box.

Here is an example of how it looks:

enter image description here

If I use padding-top then it pushes down the arrow button as well, which I don't want. I have also tried line-height with no effect.

Here is the relevant CSS:

#header .nav .misc .search .search_holder .cats select {
    width: 111px;
    height: 29px;
    border-top: 1px solid #97ad00;
    border-bottom: 1px solid #97ad00;
    border-left: none;
    border-right: none;
    padding-left: 8px;
    font-family: Roboto, Arial;
    font-size: 14px;
    background: url('../images/search-cats-bg.png') 0 0 repeat-x;
    color: #b2b2b2;
}

#header .nav .misc .search .search_holder .cats select option {
    padding-top: 5px;
}

#header .nav .misc .search .search_holder .cats select option.last {
    padding-bottom: 5px;
}

Edit: Added HTML.

HTML:

<div class="cats">
    <select id="search_cats" class="search_cats" name="cat">
        <option value="all">All Categories</option>
        <option value="sports">Sports Cards</option>
        <option value="gaming">Gaming Cards</option>
        <option value="non-sport">Non-Sport Cards</option>
        <option value="supplies" class="last">Supplies & Storage</option>
    </select>
</div>

Why is it doing this and how can I fix it?

Edit: Seems it can't really be fixed, found this question:

I want to vertical-align text in select box

If you look at the answer from "Shelly Skeens" then you will find that FF decided to set the built-in line-height to normal !important and hence it can't be overridden.

remove the padding off the options and apply it to the select instead — Matt Kieran, Oct 17 '12 at 12:01
What browser is this in? I just cheked inb IE9 (http://jsfiddle.net/uBdsE/) and it's vertically aligned in the middle. — Alan Shortis, Oct 17 '12 at 12:16
check this out http://jsfiddle.net/b2Vq6/2/ your code works fine if there is problem is relevant to #header or .nav ,.misc .search .search_holder — Afshin, Oct 17 '12 at 12:19
@alan Ok, this is weird. FF it sticks to the top, Chrome is vertically centered, IE8 is stuck to the bottom and IE7 there is no padding at all. That's from the example link you gave. — Brett, Oct 17 '12 at 12:21
@afshin Nope, as I just explained to alan, that sticks to the top as well in FF. — Brett, Oct 17 '12 at 12:22
Please clean up your css, you have 7/8 selectors per declaration. You should have somewhere between 1-3, 3 being too many. .cats select would be enough in this case. — Pablo Rincon, Oct 17 '12 at 13:50
@pablo There is nothing wrong with the way it's done, if you prefer to do it another way then that is your choice. — Brett, Oct 17 '12 at 14:33

Alvarez · Answer 1 · 2012-10-17T12:23:03.240

0

try add that

.cats * { line-height: 16px; }

edited Oct 17 '12 at 12:23

answered Oct 17 '12 at 12:01

Alvarez

1,303
1
10
28

Add it where? As I stated I have already tried using line-height and it didn't work. :( – Brett Oct 17 '12 at 12:11
i tested your code works fine, maybe something else, could you please post everything? header and the nav too – Oct 17 '12 at 12:18

score 0 · Answer 2 · answered Oct 17 '12 at 15:01

0

works fine on google chrome ,and google developer tools answer to select box qestion

answered Oct 17 '12 at 15:01

Jimmy Obonyo Abor

7,335
10
43
71

Yes, the main issue really appears to be in FF. Chrome is fine. – Brett Oct 17 '12 at 15:09

Select box text stuck to top of box in FF

2 Answers2