CODEWITHSUNDEEP
csshtmlinternet-explorer
user2042869
user2042869

Reputation: 98

td and height doesn't work properly in IE

help me please with it

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body style="margin: 0px; padding: 0px;">
        <table style="width: 600px;">
            <tr>
                <td rowspan="2" style="background: #FF0;">Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp;</td>
                <td colspan="2" height="30px" style="background: #FCC;height: 30px;">header</td>
            </tr>
            <tr>
                <td>Content</td>
                <td style="background: #EEE;">Right</td>
            </tr>
        </table>        
    </body>
</html>

Its works fine in Firefox or chrome, but IE ignoring height property and cell with text header have incorrect height. How to fix it?

Demo: Fiddle

Upvotes: 3

Views: 6125

Answers (4)

Techmonk
Techmonk

Reputation: 1469

height is not supported anymore with html 5 and is deprecated in html 4 Since you are using html5 I would suggest to use

style="height:30px;"

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body style="margin: 0px; padding: 0px;">
    <table style="width: 600px; height:500px">
        <tr>
            <td rowspan="2" style="background: #FF0;">Left</td>
            <td colspan="2" style="height:30px;background: #FCC;">header</td>
        </tr>
        <tr>
            <td>Content</td>
            <td style="background: #EEE;">Right</td>
        </tr>
    </table>        
</body>
</html>

Reference http://www.w3schools.com/tags/att_td_height.asp

Upvotes: 0

Jonathan
Jonathan

Reputation: 26619

I thought it'd be good to convert to DIVs and CSS:

<style>
    #leftPanel {
        background: #FF0;
        float: left;
        width: 135px;
    }
    #headerPanel {
        background: #FCC;
        height: 30px;
    }
    #contentPanel {
        float: left;
    }
    #rightPanel {
        background: #EEE;
        float: right;
        width: 200px;
        height: 150px;
    }
    #containerPanel {
        width: 600px;
    }
</style>

<div id="containerPanel">
    <div id="leftPanel">
    Left<br/><br/><br/><br/><br/><br/><br/><br/><br/>&nbsp;
    </div>
    <div id="headerPanel">
        header
    </div>
    <div id="contentPanel">
        Some content here...
    </div>
    <div id="rightPanel">
        Right
    </div>
</div>

Upvotes: -1

user2033045
user2033045

Reputation:

try this code:

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body style="margin: 0px; padding: 0px;">
    <table style="width: 600px; height:500px">
        <tr>
            <td rowspan="2" style="background: #FF0;">Left</td>
            <td colspan="2" height="80px" style="background: #FCC;">header</td>
        </tr>
        <tr>
            <td>Content</td>
            <td style="background: #EEE;">Right</td>
        </tr>
    </table>        
</body>
</html>

Upvotes: 0

user1959825
user1959825

Reputation:

Use an element inside the td to set height like so:

<div style="display:block;height:30px;">header</div>

Upvotes: 2

Related Questions