473,322 Members | 1,526 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

background leaksbelow image in table cell in HTML5

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
2 2900
Rabbit
12,516 Expert Mod 8TB
It would help to see the code.
Oct 6 '12 #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

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

Similar topics

2
by: zwylle | last post by:
Hi all, to avoid a nervous breakdown I finally decided to seek help :D I have a table defined with plain color background and in some cells I show pictures to frame my site. The problem I...
2
by: TAM | last post by:
Hi, I am using a table with height and width as 100%. I wish to use a background image of size W 62x H 314 pixels for one table cell. How do I make the background image stretch to fit the...
7
by: John A. | last post by:
Hello all! I've got a big bunch of pages using tables for layout. Eventually I'll get them set up with more modernized code, but in the meantime I'd like to slip in a little quick holiday...
3
by: midwesthills | last post by:
Here's what I'm trying to do: When a user hovers the mouse over an image, I want the background of the table cell it resides in to change color. I know how to use the onMouseOver event to...
5
by: Greg N. | last post by:
Hi folks, I have a table cell with a background image, something like <td background=landscape.jpg height=200></td> The sole purpose of this code is to display the image inside that table...
5
by: Doug Laidlaw | last post by:
HTML validators say that "background" is not a valid attribute for a <td> tag I want to set an image as the background for one cell only, and to have the cell content on top of it. If I can't...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
2
by: mix2plix | last post by:
ok.. been bangin by brains the past few days with this one and decided to seek you'z help. so here ya go. based on the code below and this concept.. how should i proceed? I have a table of 4...
2
by: Jim | last post by:
How can I use JavaScript to change a background image in a table cell? Here's the code for the cell <td width="338" valign="top" background="../images/ LEC_Q1.jpg"><div...
3
Frinavale
by: Frinavale | last post by:
Hi there, I'm using JavaScript to highlight a row or column in a table. I have created a CSS class that changes the background colour to a light blue and I apply this class to the cells in the...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.