Kevin McLean Posted January 10, 2009 Share Posted January 10, 2009 Could somebody explain me why td#13 in my layout doesn't stretch for 100% height of browser window? http://gviragon.ru/example/index.html css for td#13 td#13 {background-image: url(images/index_13.jpg); background-repeat: repeat; width: 100%; height: 100%;} the whole css: /* author: AFFLiCTiON */ /* Creation date: 10.01.2009 */ body {background: #000000 url(images/bg.jpg) repeat-x; margin: 0;} table#main {border: 0; width: 100%; height: 100%;} td#1 {background-image: url(images/index_01.jpg); background-repeat: no-repeat; width: 189px; height: 257px;} td#2 {background-image: url(images/index_02.jpg); background-repeat: no-repeat; height:187px;} td#3 {background-image: url(images/index_03.jpg); background-repeat: no-repeat; width: 189px; height:187px; } td#4 {background-image: url(images/index_04.jpg); background-repeat: repeat-x; height:187px;} td#5 {background-image: url(images/index_05.jpg); background-repeat: no-repeat; width: 178px; height: 257px;} td#6 {background-image: url(images/index_06.jpg); background-repeat: repeat-x; height: 51px;} td#7 {background-image: url(images/index_07.jpg); background-repeat: no-repeat; width: 31px; height: 38px;} td#8 {background-image: url(images/index_08.gif); background-repeat: repeat-x; height: 38px;} td#9 {background-image: url(images/index_09.jpg); background-repeat: no-repeat; width: 34px; height: 38px;} td#10 {background-image: url(images/index_10.jpg); background-repeat: repeat-y; width: 189px;} td#11 {background-image: url(images/index_11.jpg); background-repeat: repeat-y; width: 178px;} td#12 {background-image: url(images/index_12.jpg); background-repeat: repeat-y; width: 31px; height: 100%;} td#13 {background-image: url(images/index_13.jpg); background-repeat: repeat; width: 100%; height: 100%;} td#14 {background-image: url(images/index_14.jpg); background-repeat: repeat-y; width: 34px; height: 100%;} td#15 {background-image: url(images/index_15.jpg); background-repeat: no-repeat; width: 189px;} td#16 {background-image: url(images/index_16.jpg); background-repeat: no-repeat; width: 178px;} td#17 {background-image: url(images/index_17.jpg); width: 31px; height: 32px;} td#18 {background-image: url(images/index_18.gif); background-repeat: repeat-x; height: 32px;} td#19 {background-image: url(images/index_19.jpg); width: 34px; height: 32px;} td#20 {background-image: url(images/index_20.jpg); height: 45px;} HTML Code: <html> <head> <title>Гвирагон</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="night.css"> </head> <body> <table id="main" cellpadding="0" cellspacing="0" align="center"> <tr> <td id="1" rowspan="3"> </td> <td id="2" colspan="2"> </td> <td id="3"> </td> <td id="4" colspan="2"> </td> <td id="5" rowspan="3"> </td> <td> <img src="images/spacer.gif" width="1" height="187" alt=""></td> </tr> <tr> <td id="6" colspan="5"> </td> <td> <img src="images/spacer.gif" width="1" height="51" alt=""></td> </tr> <tr> <td id="7" rowspan="2"> </td> <td id="8" colspan="3" rowspan="2"> </td> <td id="9" rowspan="2"> </td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr height="100%"> <td id="10" rowspan="2"> </td> <td id="11" rowspan="2"> </td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr height="100%"> <td id="12" rowspan="2"> </td> <td id="13" colspan="3" rowspan="2" valign="top">sdfkhsdkghkagfk </td> <td id="14" rowspan="2"> </td> <td> <img src="images/spacer.gif" width="1" height="53" alt=""></td> </tr> <tr> <td id="15" rowspan="3"> </td> <td id="16" rowspan="3"> </td> <td> <img src="images/spacer.gif" width="1" height="23" alt=""></td> </tr> <tr> <td id="17"> </td> <td id="18" colspan="3"> </td> <td id="19"> </td> <td> <img src="images/spacer.gif" width="1" height="32" alt=""></td> </tr> <tr> <td id="20" colspan="5"> </td> <td> <img src="images/spacer.gif" width="1" height="45" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="189" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="31" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="144" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="189" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="135" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="34" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="178" height="1" alt=""></td> <td></td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
killah Posted January 10, 2009 Share Posted January 10, 2009 It should if you add more line break's to it (<br />). What you could do is add a table inside there with 0 border and make it height 100% and see what happen's there. Quote Link to comment Share on other sites More sharing options...
Kevin McLean Posted January 10, 2009 Author Share Posted January 10, 2009 It should if you add more line break's to it (<br />). What you could do is add a table inside there with 0 border and make it height 100% and see what happen's there. I've done it, but there is still a gap Quote Link to comment Share on other sites More sharing options...
Kevin McLean Posted January 11, 2009 Author Share Posted January 11, 2009 I set table height to 100%, it worked till the moment when I added some conent to td#10. The thing which happened is that content of td#10 streches td#7,td#8,td#9, which I don't know how to prevent. And it happens only in IE. http://gviragon.ru/example/index.html Quote Link to comment Share on other sites More sharing options...
killah Posted January 11, 2009 Share Posted January 11, 2009 Try using div tag's rather than table's. Div tag's are supportive over cross browser's. By using div tag's you get cross browser. Very good when needed. You just need to learn them. They are not that very hard. For example: this is css: #row_1 { height: 0px; width : 0px; margin-top: -94px; margin-left: -98px; margin-right: 0px; margin-bottom: 0px; } <div id="row_1"> </div> And that will display there. I honestly recomend using div tag's rather. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.