0

IE7 appears to add an internal padding to select boxes, as compared to IE8+ and FireFox.

Fiddle: http://jsfiddle.net/R4KhQ/7/

In Firefox, all table rows appear within the fixed height div. There are no scrollbars on the div. In IE7, the select elements are bigger, therefore pushing some table rows off the bottom of the div. Scrollbars then appear.

How do I standardize the select box styling so the height is the same cross browser without cutting off the text?

HTML

<div id="container">
<table>
    <tr>
        <th>column1</th>
        <th>column2</th>
        <th>column3</th>
    </tr>
    <tr>
        <td>column1</td>
        <td>column2</td>
        <td>
            <select>
                <option>An Option</option>
                <option>Another Option</option>
                <option>Yet Another Option</option>
            </select>
        </td>
    </tr>

(repeat the tr row)

</table>
</div>

CSS

#container {
    border: 1px solid black;
    width: 500px;
    height: 330px;
    overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th{
    font-weight: bold;
}
psx
  • 4,040
  • 6
  • 30
  • 59

1 Answers1

1

You, my friend are missing the glory of reset.css. Embrace yourself

http://www.cssreset.com/?utm_expid=37596592-1

Edit: There is no workaround for this.

Edit2: More discussion here - Setting the height of a SELECT in IE

Community
  • 1
  • 1
srijan
  • 1,504
  • 1
  • 13
  • 24
  • I put in Reset CSS v2.0 and it did not fix the select box issue. Can you post me a link to a working fiddle? – psx Nov 15 '12 at 16:39
  • It seems like there is no workaround for this. More Info - http://stackoverflow.com/questions/490036/setting-the-height-of-a-select-in-ie – srijan Nov 15 '12 at 16:44
  • If you want to update your answer to say there's no workaround, I'll accept it. Thanks – psx Nov 21 '12 at 07:36