CODEWITHSUNDEEP
htmlcsscross-browseropera
ovabrandon
ovabrandon

Reputation: 986

Select Box looks different in Opera?

the following is my desired result. It works fine in Chrome, IE and FF:

Perfect

this is my result when I am using Opera:

broken

Demo site: http://www.unforgivengamers.com

Help please?

Upvotes: 1

Views: 871

Answers (2)

ovabrandon
ovabrandon

Reputation: 986

I ended up using an ugly css hack to only target opera with a slightly different padding for the select.

x:-o-prefocus, #menu select {
 padding: 5px 2px 5px 0;
}

Upvotes: 1

user1721135
user1721135

Reputation: 7092

I was able to fix the difference by assiginig height to the input.

See this example, there is no difference in height in any browser:

http://jsbin.com/ijuzas/1/edit

If you assign the same height to the select and input element it should be equal.

Using operas inspect element i changed the height to 14px and it looked the same.

#menu form input[type="text"] {
height:14px;
}

However, it would be best to set the same height on both select and input and not leave it unset.

Upvotes: 2

Related Questions