How to emulate min-width in IE8

Question

The IE8 documentation says it supports min-width, but it doesn't seem to work for me.

The html I want to be a minimum width is in table cells.

I saw another question here which suggested adding a 1-pixel height div to each cell, with a width setting, but that doesn't work - IE renders it as 18 pixels high, for some reason.

Here is the html code:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
    height: 50px;
    font-size:50px;
    border: 5px outset gray;
    min-width: 60px;
    text-align: center;
}
table.keyboard div.spc {
    height: 1px;
    width: 60px;
    background-color: green;
}

table.keyboard td:hover {
    background-color: lightblue;
}
table.keyboard {
    border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
    <tbody>
        <tr>
            <td><div class='key'>1</div><div class='spc'></div></td>
            <td><div class='key'>2</div><div class='spc'></div></td>
            <td><div class='key'>3</div><div class='spc'></div></td>
            <td><div class='key'>4</div><div class='spc'></div></td>
            <td><div class='key'>5</div><div class='spc'></div></td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

The "spc" div appears 18 px high!

Of course, if min-width worked, I wouldn't need the div...

<table class='keyboard'>
    <tbody>
        <tr>
            <td><div class='key'>1</div></td>
            <td><div class='key'>2</div></td>
            <td><div class='key'>3</div></td>
            <td><div class='key'>4</div></td>
            <td><div class='key'>5</div></td>
        </tr>
    </tbody>
</table>

Any clues?

Just to make this easier, I have put 3 different versions of this code on my website.

score 4 · Accepted Answer · answered Nov 11 '11 at 19:26

4

http://jsfiddle.net/3htmA/

IE8. your code works perfect.

answered Nov 11 '11 at 19:26

korywka

7,537
2
26
48

That's wierd - it works there, but not on my website. I wonder what the difference is? – Nikki Locke Nov 11 '11 at 19:37
7

so set it :) for example: – korywka Nov 11 '11 at 19:46
3

In case anybody is wondering `DOCTYPE` declaration is needed to avoid "quirks mode": http://hsivonen.iki.fi/doctype/ – Mikko Rantalainen Jan 28 '13 at 10:59
If a div renders larger than expected, make sure that it has zero padding. – Mark Rabjohn Feb 06 '14 at 08:21

score 0 · Answer 2 · answered Nov 11 '11 at 19:25

0

The HTML TABLE spec uses COL to define column widths. See the following spec: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

Here's an example of how it's used: http://www.htmldog.com/guides/htmladvanced/tables/

Min-width on table cells works differently than block-level elements. Table cells are controlled on the column level, not on the individual cell level. If a given cell size increases or decreases, the entire column will be affected, unless explicitly controlled by the tag.

answered Nov 11 '11 at 19:25

Joshua

3,615
1
26
32

Sorry, I don't understand. I want all the table columns to be a minimum width. And I do want the whole column to be affected. Not sure why I would want to introduce col elements at all? – Nikki Locke Nov 11 '11 at 19:41

bobek · Answer 3 · 2011-11-11T19:55:23.327

0

Try this:

table.keyboard .key
{
min-width:60px;
width: expression(this.width < 60 ? 60: true);
}

This width expressions is an alternative for min-width, it supposed to be a workaround for older versions of IE.

I think your problem is that your column is determining the width of the element, not the div.

EDIT:

Also check if your browser is not in Compatibility mode.

edited Nov 11 '11 at 19:55

answered Nov 11 '11 at 19:27

bobek

8,003
8
39
75

How to emulate min-width in IE8

3 Answers3

Linked