CSS height issues

my html and css are as follows, but the ‘tall’ images don’t stretch to the top and bottom of their respective cells.. I tried putting height at 100% in the css but then they stretch way too far and the table (see attached) looks skewed, so in this example i just put the picture of the page without the height:100%; on it… how do I get those pics to stretch exactly from the top of the cell to the bottom?

[CODE]
<div id=’main’>
<table id=’tbl’>
<tr>
<td rowspan=’4′ id=’tall’ style=’background-image:url(mypics/tmp7leftbg.png);
background-position:0% 90px; background-repeat:no-repeat; background-size:100% 100%;’>
<a href=’http://www.webified.biz/templates/template7.html’ class=’link’>OUR MISSION</a><br>
<a href=’http://www.webified.biz/templates/template7.html’ class=’link’>LOCATIONS</a><br>
<a href=’http://www.webified.biz/templates/template7.html’ class=’link’>HUMANITARIAN</a><br>
<a href=’http://www.webified.biz/templates/template7.html’ class=’link’>WORSHIP</a><br>
<a href=’http://www.webified.biz/templates/template7.html’ class=’link’>CONTACT</a><br>
</td>
<td class=’onecol’ rowspan=’2′ id=’tall’><img src=’mypics/tmp7pic1.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic4.png’/></td>
<td colspan=’2′ id=’long’><img src=’mypics/tmp7pic8.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic13.png’/></td>
<td class=’onecol’ rowspan=’2′ id=’tall’><img src=’mypics/tmp7pic17.png’/></td>
</tr>
<tr>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic5.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic9.png’/></td>
<td class=’onecol’ rowspan=’2′ id=’tall’><img src=’mypics/tmp7pic12.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic14.png’/></td>
</tr>
<tr>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic2.png’/></td>
<td class=’onecol’ rowspan=’2′ id=’tall’><img src=’mypics/tmp7pic6.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic10.png’/></td>
<td class=’onecol’ colspan=’2′ id=’long’><img src=’mypics/tmp7pic15.png’/></td>
</tr>
<tr>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic3.png’/></td>
<td colspan=’2′ id=’long’><img src=’mypics/tmp7pic11.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic9.png’/></td>
<td class=’onecol’ id=’norm’><img src=’mypics/tmp7pic18.png’/></td>
</tr>
</table>
</div>
[/CODE]
[CODE]
bg {position:absolute; left:0px; width:100%;}
#head, #main{position:absolute;}
#head {margin-top:0px; left:15%;}
#head1 {font-size: 40px;} #head2 {font-size:15px;}
#main {top:8%; left:6%; width:88%; height:65%; }
#tbl {width:100%; height:100%; background-image: url(mypics/tmp7bg.png);}
#tbl tr td {border: solid rgba(0, 0, 0, 0.0) 6px; }
#tbl tr:first-child > td:first-child {border: solid rgba(0, 0, 0, 0.1) 6px; vertical-align:top;}
.onecol {width:14.28%;}
a {text-decoration:none; font-size:13px; padding:5px; margin:5px; position:relative; z-index:1;}
a:visited {color:black;}
a:hover {color: #78372e; text-decoration:underline;}
#tall > img{width:100%; }
#long > img{width:100%;}
#norm > img{width:100%;}
[/CODE]

[ATTACH]15599[/ATTACH]

[canned-message]attachments-removed-during-migration[/canned-message]

Also in #CSS _↴