M Thomas M Thomas - 1 year ago 109
CSS Question

White space between image and td when zooming in or out in the browser

I browsed some other questions, but couldn't find something that fixes my issue.

I created a code snippet here:

I have a table with one row and six cells. The width of each td/cell is defined and it matches the width of the image inside of it (the width of each image is defined, too). Everything works fine, but when I zoom in or out in the browser, white gaps appear somewhat sporadically.

I tried removing white space in the code, I defined the width and height, the images are set to display:block, the total width of each cell/image matches the total width of the entire table, which is also defined. The client is being picky about the gaps when zooming, though, and I'm out of ideas.

*This is for an HTML newsletter, which is why I'm using the old school table layout method.

Thanks in advance for any suggestions!

<table width="600" cellpadding="0" cellspacing="0" border="0">
<td width="31">
<img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">

<td width="65">
<img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">

<td width="411">
<img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">

<td width="64">
<img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">

<td width="29">
<img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">


The relevant css:

<style type="text/css">
img {display:block !important;}

Answer Source

While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.

One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.

Another solution could be to use background images instead of <img> tags as @user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download