|
Answer» I'm trying to create a frame effect with HTML tables:
http://bc-programming.com/test/test.html
ignore the border and cellspacing here, they will be removed when it's done. The issue is the two "gaps" that appear at the upper right and lower left. the intention is that any stretching of the table would STRETCH only the middle cells, since they have a background that will repeat. However I cannot for the life of me figure out why the whitespace even exists; even if I use absolute pixel size for the td tag it still has the whitespace.
any ideas?Baring that fact that you're using old, deprecated code, to answer your question.
Your graphics will stretch the tables to FIT the white space is because top-middle-to-right-trans.png and bottom-middle-to-right-trans.png are not the same width. As well as top-left-to-middle-trans.png and bottom-left-to-middle-trans.png. If their widths are the same the table cell's width will be the same. The explicit width doesn't really work for things larger than the cell. So you will need to edit your graphic files.
I rewrote your table, it should work better this way (once the graphics are edited).
Code: [Select]<table border="0" cellpadding="0" cellspacing="0"> <tr> <td height="100%" width="26px"><img src="upper-left-corner.png"></td> <td height="100%" width="82px"><img src="top-left-to-middle-trans.png"></td> <td background="top_repeat.png" width="100%"></td> <td height="26px" width="116px"><img src="top-middle-to-right-trans.png"></td> <td height="26px" width="26px"><img src="upper-right-corner.png"></td> </tr> <tr> <td background="left-repeat.png" height="100%"></td> <td colspan="3" valign="top"><p>Content</p> </td> <td background="right-repeat.png" height="100%"><td> </tr> <tr> <td><img src="bottom-left-corner.png"></td> <td><img src="bottom-left-to-middle-trans.png"></td> <td background="bottom-repeat.png"></td> <td><img src="bottom-middle-to-right-trans.png"></td> <td><img src="bottom-right-corner.png"></td> </tr> </table>facepalm
never thought it MIGHT be the graphics themselves... I remember making sure the vertical sides were the same but never took the same care with the top and bottom... oops.
thanks for the help
|