nsp nsp - 1 month ago 4
CSS Question

HTML mail - Unable to fix td height

I'm trying to make an html mail so I need to use inline CSS. The problem is that I can't figure out why the cell height I set doesn't display as I intended. I've set the % height of the cells like I would them to be, but the result isn't as I expected.

The code is this and as you can see the result is not like I intended because I've set 15% for the header but in the result is obviously not 15% and no matter the value it does not change the result. The same thing happens with the other td:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8">
<title></title>
</head>
<body>
<table style="table-layout:fixed; width:56%; height:100%;" border="1" bordercolor=black align=center>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<a href="http://www/">
<img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%" alt="Header"/> </a>
</th>
</tr>
<tr>
<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%" alt="Patrik" />
</td>
<td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Alberta" />
</td>
</tr>

<tr>
<td colspan="2" style="height:60%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>
</td>
</tr>
<tr>
<th colspan="2" style="height:15%; width:100%;" >
<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>
</th>
</tr>
</table>
</body>
</html>





I hope you can help me.

Answer

To have the image to stretch to the same height and width as the containing boxes, simply add a 100% width and a height equal to the row it is in:

http://jsfiddle.net/j2bcc24o/4/

If you just want the width, go for:

http://jsfiddle.net/j2bcc24o/3/

<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
    <img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>

And also don't forget to set html and body to 100% height and width as well as 0 padding and margin:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
Comments