CODEWITHSUNDEEP
htmlcssinternet-explorer
Fritz H
Fritz H

Reputation: 3569

Table row height in Internet Explorer

I have the following table:

<table>
    <tr>
        <td style="height: 7px; width: 7px"> A1 </td>
        <td style="height: 7px"> B1 </td>
        <td style="height: 7px; width: 7px"> C1 </td>
    </tr>
    <tr>
        <td style="width: 7px"> A2 </td>
        <td> B2 </td>
        <td style="width: 7px"> C2 </td>
    </tr>
    <tr>
        <td style="height: 7px; width: 7px"> A3 </td>
        <td style="height: 7px"> B3 </td>
        <td style="height: 7px; width: 7px"> C3 </td>
    </tr>
</table>

The basic idea is that the first row must be 7 pixels high. The left- and rightmost cells (A1 and C1) must be 7px wide, and the middle cell (B1) must scale according to the width of the table. The same goes for the bottom row (A3, B3, C3).

The middle row, however, needs to scale in height - in other words, it needs to be (tableheight - 14px). The left- and rightmost cells (A2, C2) need to be 7 pixels wide.

An example:

             7px              x               7px
          |------|-------------------------|------|

---       +------+-------------------------+------+
 |        |      |                         |      |
 | 7px    |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 | y      |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+
 |        |      |                         |      |
 | 7px    |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+

HOWEVER: In Internet Explorer, the widths work fine (columns A and C are 7px, column B scales dynamically) - but the heights don't. Rows 1, 2 and 3 turn out to be exactly 33% of the height of the table, no matter what I do. Unfortunately I have to use this table, so replacing it with a set of DIVs is not an option.

I have the following DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I need to keep this, as some other elements on the page rely on some complex CSS-based layouts.

Can anyone point me in the right direction to whip this into shape for IE?

EDIT: Should have mentioned earlier - this table is resized on the fly using javascript.

Upvotes: 10

Views: 41020

Answers (9)

Whistler Web Design
Whistler Web Design

Reputation: 11

I just had a similar problem. I noticed in IE the width property sometimes needs to be defined as a percentage to work with IE

style="width: 25%"

then defined absolutely in the css for cross-browser continuity

.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}

Upvotes: 1

Chris Dale
Chris Dale

Reputation: 2222

Instead of using the height propertiy (since its causing problems) you can use a spacer. For exampel a transparent small gif which u set the height to the amount you want too. The gif you would just do like this: <img src="./gfx/spacer.gif" style="height:14px;" />

Upvotes: 1

user170422
user170422

Reputation: 11

What I do is declaring the outmost columns first with all the rows widths and heights, then I merge all rows in the middle column with rowspan.

For the heights, in the middle column once merged, I just write <tr width and no height, all browsers support no height I think. No need for GIFs. It has worked for me all the time.

Hope this can help.

Upvotes: 1

hendra ong
hendra ong

Reputation: 21

try this 

<table>
    <tr>
        <td style="height: 7px; width: 7px"> A1 </td>
        <td style="height: 7px"> B1 </td>
        <td style="height: 7px; width: 7px"> C1 </td>
    </tr>
    <tr height="100%">
        <td style="width: 7px"> A2 </td>
        <td> B2 </td>
        <td style="width: 7px"> C2 </td>
    </tr>
    <tr>
        <td style="height: 7px; width: 7px"> A3 </td>
        <td style="height: 7px"> B3 </td>
        <td style="height: 7px; width: 7px"> C3 </td>
    </tr>
</table>

Upvotes: 1

Somnath
Somnath

Reputation: 3267

Try this...Its working for me...

<td style="height:2px;font-size:2px;">
     <img  height="2px" alt="" src="images/transparent.gif" />
</td>

Upvotes: 0

gmike
gmike

Reputation: 11

There is an IE9-Beta excessive row height issue that shows up in print-preview & printed copy too. For example, the row-height problem occurs when you attempt to print a 1px high line. To fix, I added <div style="font-size:0pt;">...</div> around the entire HTML code block.

Upvotes: 1

Skuta Attila
Skuta Attila

Reputation:

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Upvotes: 3

Gineer
Gineer

Reputation: 2408

In the past I have found that the height attribute of cells are overridden by the font size inside the cell, even if there is not font present. Set the font size to something like 1 or 0 px and your heights will actually take effect.

Upvotes: 8

bobince
bobince

Reputation: 536349

this table is resized on the fly using javascript.

Then how about also setting:

table.rows[1].style.height= (totalheight-14)+'px';

explicitly?

The actual old-school correct answer for this is:

<tr height="7">...<tr>
<tr height="*">...<tr>
<tr height="7">...<tr>

Unfortunately, browsers never actually supported the HTML ‘*’/‘n*’ syntax. You can say:

<tr style="height: 7px;">...</tr>
<tr style="height: 100%;">...</tr>
<tr style="height: 7px;">...</tr>

but IE takes this literally and makes the middle row 100% of the height of the whole table (which in turn makes the table taller than it should be). You could use this in conjuction with an IE hack to make the table's height 14px smaller on that browser, perhaps.

Upvotes: 1

Related Questions