Clever Geek Handbook

Td and height not working as expected in IE

help me please with him

<!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>

It works fine in Firefox or chrome, but IE ignores the height property and the cell with the title text has the wrong height. How to fix it?

Demo: Fiddle

+3


source to share


4 answers


Use an element inside a td to set the height like this:



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


source


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>
0


source


I thought it would be nice to switch to DIV 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>
0


source


height is no longer supported with html 5 and is deprecated in html 4 Since you are using html5 I would suggest using

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>

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

0


source






More articles:


All Articles