CODEWITHSUNDEEP
htmlcssinternet-explorer-8
juleee
juleee

Reputation: 466

Text of html select aligned at bottom in IE8

i applied 

select{
  line-height: 30px;
  height: 30px;
}

to a html select box. Every Browser except this IE8 aligns the text inside the select box vertically centered (see 1). I have no idead what to do to fix that. I already read a lot of answer to similiar problems here at stackoverflow and played with box-sizing and padding properties but without success.!

here is what the errorneous layout in IE8 looks like

Upvotes: 1

Views: 3812

Answers (3)

Morgan Feeney
Morgan Feeney

Reputation: 897

Quite simply, what I have found is that if you only apply padding to give the height and vertical alignment of just the select element you can achieve a cross-browser solution, even for the likes of IE8, using only padding:

Please see my pen

As Codepen does not support IE8 please export my pen as a zip and view the file locally either emulating IE8 or using a genuine installation of IE8 somewhere.

or just copy my code below and create your own .html file

HTML

<select name='options'>
  <option value='option-1'>Option 1 that could be fairly long</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

CSS

select {
  padding: 8px;
}

Upvotes: 1

Marinus
Marinus

Reputation: 441

Try This..

<div class="styled-select">
<select>
  <option>Here is the first option</option>
  <option>The second option</option>
</select>
</div>

.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}

Upvotes: 0

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15626

Apply conditional CSS styling targetting IE8 browser only.

<!--[if IE 8]>
<link href="styles/IE8.css" type="text/css" rel="stylesheet">
<![endif]-->

Seems to me the issue can be resolved by fiddling with line-height itself.

Upvotes: 0

Related Questions