CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-table
mark smith
mark smith

Reputation: 20907

IE bug with TD's tables and whitespace?

I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr

I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..

Here is a simple example..

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

as you can see there is white space between img and td... and I remove it so it looks like this:

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

the problem is gone, (notice the td and image are right next to each other)

Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...

Any ideas really appreciated.

Upvotes: 6

Views: 18843

Answers (10)

Matthew Lock
Matthew Lock

Reputation: 13486

I had this issue too with an intranet site on Internet Explorer, so I turned off the compatibility view mode for intranet sites to fix it:

enter image description here

Upvotes: 0

Bryan B.
Bryan B.

Reputation: 897

As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.

Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!

Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.

Hope that helps!

Upvotes: 5

Martin Smellworse
Martin Smellworse

Reputation: 1752

This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.

Setting display:block on the images did it for me.

Upvotes: 2

David
David

Reputation: 31

I tried all solutions above:

a) tried the display:block

b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )

c) I tried using:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Solution a) worked. Solutions b) and c) did not work on IE.

But the BEST SOLUTION I found is this:

Add a hspace=0 attribute to the Image tag. For example:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />

This does the trick.

Upvotes: 1

ChezFre
ChezFre

Reputation: 6512

Another late response, but you could also use line-height: 0; to remove the whitespace. To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.

td * { line-height: normal; }

Upvotes: 0

BCsongor
BCsongor

Reputation: 869

Other (and the best :) ) solution is:

  1. set the td width/height to the image width/height with css
  2. set image to the background for td

Like:

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>

It works form me :)

(sorry for my english :"> )

Upvotes: 0

Federico
Federico

Reputation: 31

I've fixed adding this before the end of table:

<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>

Hope this help.

Upvotes: 3

Paolo Bergantino
Paolo Bergantino

Reputation: 488434

The only way to "fix it" (and I use that term loosely) is to remove the whitespace.

More importantly, you should stop making websites like it's 2001. :)

Upvotes: 4

Eli
Eli

Reputation: 99418

It's been this way for as far back as I can remember, all versions.

For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.

Upvotes: 0

instanceof me
instanceof me

Reputation: 39138

IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.

Upvotes: 0

Related Questions