<td> height issue

Hi experts,

I've searched all over for an answer to this question, but all the answers appear to have been written several years ago and reference IE 6, and I'm hoping a better solution has been found since then. For my purposes, I only need to be compatible with IE 8 and up.

In the table below, Cells 1, 2, 3, 5, 6 and 7 are all set to specified heights; cell 4 is intended to expand as needed so that the table as a whole fills the entire page height. This table displays correctly in Firefox and Chrome, but in IE, cell 3 extends far beyond its specified height of 30px. How do I fix this?

Thanks!

<style type="text/css">
table {
	border-width: 2px;
	border-spacing: 0px;
	border-style: solid;
	border-color: black;
	border-collapse: separate;
	background-color: white;
}
 td {
	border-width: 2px;
	padding: 1px;
	border-style: solid;
	border-color: black;
	background-color: white;
	text-align:center;
}
</style>

<table cellpadding="3" cellspacing="3" style="table-layout:fixed; width: 100%; height: 100%;" ID="Table3">
    <tr>
        <td colspan="2" style="height: 30px;">Cell 1</td>
    </tr>
    <tr>
        <td rowspan="2" style="height: 305px;">
            Cell 2
        </td>
        <td style="height: 30px;">
            Cell 3
        </td>
    </tr>
    <tr>
        <td rowspan="2">
           Cell 4
        </td>
    </tr>
    <tr>
        <td style="height: 105px;">
            Cell 5
        </td>
    </tr>
    <tr style="height: 50px;">
        <td>
           Cell 6
        </td>
        <td>
            Cell 7
        </td>
    </tr>
</table>

Open in new window

EffinGoodAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ramyajanarthananCommented:
Try hacking like this

<td style="height: 30px;height:0px\9;">
            Cell 3
        </td>
0
Eddie ShipmanAll-around developerCommented:
I believe if you set your line-height, it should fix the problem.
0
COBOLdinosaurCommented:
I don't understand what you are trying to do, but if you are trying to use a table to do layout it might explain why you only find IE6 references.  Tables for layout are a 20th century technique, and no amount of hacking is going to them as stable and manageable as modern layouts using modern markup and CSS.

Tables are for presenting tabular data.  Using them for anything else guarantees all kinds of problems.

Cd&
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Slick812Commented:
greetings  EffinGood, , You present a TABLE layout that is NOT conforming to the TABLE Column-Row specs, at least that's my opinion. You say it looks OK in FF and chrome, but not so in IE. I somewhat agree with COBOLdinosaur, but make no mistake, the DHTML <table> is a valuable and necessary element in web page production, it has been Enhanced not degraded in the latest CSS3 and HTML5.

It is my view that ALL tables need to have proper  TABLE Column-Row specs, as in - - - if you have rowspan or colspan you need to have the correct number of ROWS <tr>and correct number of  columns <td> ot correspond to the rest, it looks like you have an orphan row, anyway since you are using tables here is my version -
#Table3 {
	border-width: 2px;
	border-spacing: 0px;
	border-style: solid;
	border-color: black;
	border-collapse: separate;
	background-color: white;
}
#Table3 td {
	border-width: 2px;
	padding: 1px;
	border-style: solid;
	border-color: black;
	background-color: white;
	text-align:center;
}
</style>


<table  cellpadding="3" cellspacing="3" style="table-layout:fixed;width: 100%; height: 100%;" ID="Table3">
    <tr>
        <td colspan="2" style="height: 30px;">Cell 1</td>
    </tr>
    <tr>
        <td style="height: 305px;">
            Cell 2
        </td>
        <td rowspan="2" style="padding:0;">
<table style="width:100%;height:100%;"><tr><td style="height:30px;border:0;border-bottom:4px solid #000;">cell 3</td></tr><tr><td style="border:0;">cell 4</td></tr></table>
        </td>
    </tr>
    <tr>
        <td style="height: 105px;">
            Cell 5
        </td>
    </tr>
    <tr style="height: 50px;">
        <td>
           Cell 6
        </td>
        <td>
            Cell 7
        </td>
    </tr>
</table>

Open in new window

I add a table so the Containing table has what I think corresponding rows and columns
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
If I take out the 'style' statements in the "td"s, your table looks the same in IE and Firefox.  That means that your 'rowspan' attributes are not making sense.
0
EffinGoodAuthor Commented:
None of the answers fully resolved my question, but this one came closest.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.