By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,461 Members | 1,108 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,461 IT Pros & Developers. It's quick & easy.

background leaksbelow image in table cell in HTML5

P: 2
I'm converting a circa 2002 website to comply with html5/CSS3, without rewriting it extensively. I'm not familiar with the nuances of HTML5 in terms of rendering, and I can't find this particular issue in the references.

The validation errors consist of no longer used attributes, so I'm thinking to upgrade the .css file to replace them, and dropping them from the HTML tags. I've shortened the example for simplicity.

There is a controlling table, 1 row x 5 cells, each 150W x 100H. Each holds an image exactly 150W x 100H. In the CSS I've set the table and cell margins & paddings to zero, set the border to none, collapsed the border, defined the cell heights and widths be the above, and set the background to a high constrast in order to see what's going on.

I am getting a 2 pixel background leak past the bottom of each image, showing up as a solid line across the bottom of the table. Something is forcing open space down there. I cannot find a reference to what it might be, but someone here will know immediately, I believe. I've checked the rendering in Firefox 15.0.1 and IE 10 so far, and the behavior is the the same in both.

I don't believe there is a syntax error in the CSS. More likely there's something new I don't know about. In fact, I can put the HTML5 DOCTYPE on the page, and change none of the obsolete attributes, and none of the CSS, and get the same rendering. I.e. extra pixels along the bottom. Of course, it renders fine without the DOCTYPE.

What am I missing to bring it into compliance and still render without the extra space?
Oct 6 '12 #1
Share this Question
Share on Google+
2 Replies


Rabbit
Expert Mod 10K+
P: 12,430
It would help to see the code.
Oct 6 '12 #2

P: 2
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <table class=control>   
  7. <tr>
  8. <td class=c2>
  9. <img src="i1.jpg" alt="text" width="150" height="100">
  10. </td>
  11. <td class=c2>
  12. <img src="i2.jpg" alt="text" width="150" height="100">
  13. </td>
  14. <td class=c2>
  15. <img src="i3.jpg" alt="text" width="150" height="100">
  16. </td>
  17. <td class=c2>
  18. <img src="i4.jpg" alt="text" width="150" height="100">
  19. </td>
  20. <td class=c2>
  21. <img src="i5.jpg" alt="text" width="150" height="100">
  22. </td>
  23. </tr>
  24. </table>
  25. </body>
  26. </html>
  27.  
  28. The 2002 code differed in that there was no DOCTYPE, the <table> tag contained attributes, and the <td> tags contained no class reference:
  29.  
  30. <table border=0 cellspacing=0 cellpadding=0 bgcolor=01287D align=center>
  31.  
  32. <td><img etc></td>
  33. ....repeat...
  34.  
  35.  
  36. This CSS definition attempts to replace the attributes in the table tag.
  37.  
  38.  
  39. .control                  */replaces obsolete attributes /*
  40. {
  41. margin:0px;
  42. padding:0px;
  43. background-color:yellow;  */contrast for troubleshooting /*
  44. border-style:none;
  45. border-collapse:collapse;
  46. margin-left:auto;          */centers table on screen /*
  47. margin-right:auto;
  48. width:750px;
  49. }
  50.  
  51. I believe this CSS definition is unnecessary, but did it to apply to the <td> tags to see if it mattered. It did not solve the problem.
  52.  
  53. .c2   
  54. {
  55. margin:0px;
  56. padding:0px;
  57. width:150;
  58. height:100px; 
  59. border-collapse:collapse;
  60. }
Repeating the issue: the above table renders with 2pixels of empty space below each image, and the background bleeds through. How can I fix it?
Oct 6 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.