A couple of week ago, I found an issue on my website. IE, Firefox and Safari worked well with my website, but Chrome displayed mysterious 2-3 pixels of white space between the bottom of the images and the border of the tables on my website.
[Open the code that shows the issue with Chrome]
Actually, I set the space among the cell walls and the cell contents to 0 pixels by using the attributes: [cellpadding], [cellspacing]. In additions, the values of the border attributes on the table and the images were zero. Therefore, I thought there is no reason for the mysterious white space.
<table width="200" height="150" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> <tr> <td width="200" height="50"> <img border="0" src="cell1.jpg"> </td> </tr> .... </table>
I researched the issue for several days. There were so many similar cases on the Internet, but I cannot find the reason of my case. As a result, I tested a bunch of cases. I started the test with a code excluding any CSS codes. In that case, Chrome didn’t display any space between the images and the borders of the tables, so I assumed a CSS attribute caused this issues. Finally, I found what triggered the space. The reason was the attribute: “word-break:break-all;” in my CSS code.
<STYLE TYPE='text/css'> body { word-break: break-all; } </STYLE>
Even though I found the reason, I wasn’t able to solve the problem because I needed the attribute: “word-break:break-all;” in my CSS code. I guessed Chrome recognizes images like words because <img> is an inline element, so the attribute makes space after images. Therefore, I tried to set the images to block elements by using CSS display property: “display: block;”. I also used .class selector to specify the only images that showed the mysterious space. The shot worked.
<html> <head> <title>Example.2</title> <STYLE TYPE='text/css'> body { word-break:break-all; } img.noSpace { display: block; } </STYLE> </head> <body> <table width="200" height="150" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;"> <tr> <td width="200" height="50"> <img class="noSpace" border="0" src="cell1.jpg"> </td> ...... </table> </body> </html>
[Open this code with Chrome]
If you have further questions, please feel free to contact me.
Blessings,
Jin