CODEWITHSUNDEEP
csshtml-tablewhitespacezooming
MT3
MT3

Reputation: 1065

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: http://jsfiddle.net/manoj382/3SeB7/embedded/result/

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.

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

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

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

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

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

        </tr>
    </tbody>
</table>

The relevant css:

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

Upvotes: 1

Views: 6374

Answers (5)

Marie
Marie

Reputation: 1

I just had a similar issue. What the browser is doing is increasing the <td> cells so that combined they fill the whole width of the table, which is causing the white space between the image which is XXpx and the td which is now XX.2313px. You can fix this by setting the min-width of all your images to 100%.

Upvotes: -1

Ronaldo9
Ronaldo9

Reputation: 11

The issue is your sliced images are sometimes odd integers. If you change the image slice widths to an even number (and of course in the widths in the img and td tags), it should eliminate the gaps at certain zoom levels.

Upvotes: 1

imaddy5
imaddy5

Reputation: 1

insted of giving width in the table, try giving the width in the style tag:

Insted of

Try the below

<table style="width:700px" cellpadding="0" cellspacing="0" border="0">

Upvotes: 0

manishie
manishie

Reputation: 5322

I cannot explain why it's doing this (I'm able to duplicate it on my Mac). But I do have a fix.

For some reason, your table cell with the width of 411 pixels is showing as 412px wide. The image is also showing as 412px wide, even though the image itself is only 411px wide. You can see this if you run Chrome Dev Tools and mouse over the table cell. It will show that it has an actual width of 412 for some reason that I cannot explain.

If I delete the table width of 600 at the top, the problem goes away.

Change this:

<table width="600" cellpadding="0" cellspacing="0" border="0">

to:

<table cellpadding="0" cellspacing="0" border="0">

See: http://jsfiddle.net/3SeB7/1/embedded/result/

Upvotes: 2

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140060

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.

Upvotes: 3

Related Questions