CODEWITHSUNDEEP
cssselectheightvertical-alignment
scarhand
scarhand

Reputation: 4337

firefox not vertically centering select input content with height specified

here's an image of whats going on:

http://imageshack.us/photo/my-images/217/ffbug.png/

here's my code:

select {
    width: 150px;
    height: 40px;
    padding-left: 10px;
}

in chrome and firefox, it vertically-aligns the select values perfectly. in firefox, the values are stuck to the top of the select.

i've tried adding vertical-align: middle and line-height: 40px, both of which changed nothing.

Upvotes: 6

Views: 8769

Answers (3)

Milkmannetje
Milkmannetje

Reputation: 1181

Try this CSS code:

@-moz-document url-prefix() {
  select {
    padding-top: 13px;
  }
}

This should work, when you want multiple browser support.

Upvotes: 0

scarhand
scarhand

Reputation: 4337

i decided to put it in a div with this code:

.search li select {
    padding: 0px;
    margin: 0px;
}
.search li div {
    height: 32px;
    padding: 10px 10px 0px 10px;
    background: #ffffff;
}

the div background is same as the select background.

its pretty well centered in FF IE and chrome, only thing is the arrow is inside the padding as well...oh well...sometimes you can't win i guess.

Upvotes: 0

sascha
sascha

Reputation: 4690

Just use padding-top: 10px; padding-bottom: 10px; on that element. Your text will be automatically centerd.

Upvotes: 2

Related Questions