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:
           
            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%;}
Untitled.jpg