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> Link to comment https://forums.phpfreaks.com/topic/140268-td-100-height-doesnt-work/ 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. Link to comment https://forums.phpfreaks.com/topic/140268-td-100-height-doesnt-work/#findComment-733968 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 Link to comment https://forums.phpfreaks.com/topic/140268-td-100-height-doesnt-work/#findComment-734144 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 Link to comment https://forums.phpfreaks.com/topic/140268-td-100-height-doesnt-work/#findComment-734584 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. Link to comment https://forums.phpfreaks.com/topic/140268-td-100-height-doesnt-work/#findComment-734806 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.