This is one of those simple web page design things that can drive a web developer absolutely crazy. You create a web page that uses multiple images and place them in a table which is divided into multiple columns and rows. In each cell you place an image using either a standard html image tag, or an asp:Image or asp:HyperLink control in ASP.NET. After completing the html design you test it out in Firefox and Internet Explorer 6.0. Your first test in Firefox renders the page exactly as you’ve designed it. Next you test the appearance of the page in Internet Explorer and find out that it doesn't look like it’s supposed to. Instead of the images connecting seamlessly, there is a gap between the rows that have images in the table cells. See this screenshot for a view of a sample problem web page with the table row whitespace gap problem.
After making sure the Table has it’s cellpadding, cellspacing and border all set to 0, you then check to make sure that each cell has it’s valign=”top”, and that there is no height and width settings that you don’t want to have. You now retest the page and still get a space above the asp:image control in IE. What in the world could be the problem?
Well this is exactly what I was asking myself, and racked my brain trying to figure out what exactly was causing the design error in IE. Low and behold, I found the answer to this problem was pretty darn simple. Unfortunately, I spent a whole lot of time trying to figure out what was causing the problem. Anyway, here’s a few different ways to help solve this Internet Explorer table cell/row - asp:image white space gap issue.
1. If there are no other html tags inside of a table column cell besides an html image or asp:Image tag make sure the ending html cell TD tag is directly next to the ending image tag. There should be no space between the two tags, and the ending </TD> tag cannot be on a separate line. For instance, the correct html line of code might look like this:
<TD>
<asp:Image ID="Image1" runat="server" ImageUrl="images/header.gif" /></TD>
You don’t want it to look like this:
<TD>
<asp:Image ID="Image1" runat="server" ImageUrl="images/header.gif" />
</TD>
I’ve also noticed this problem occur when using a regular html <img> tag, when the ending cell tag </TD> is on a separate line. For instance this will also cause the gap to occur:
<TD>
<IMG src="images/header.gif" >
</TD>
Instead the html should should look like:
<TD>
<IMG src="images/header.gif"></TD>
2. You can also use an html DIV or P tag to wrap the asp:Image tag, but you must make sure the closing DIV tag is right next to the end of the asp:Image server control tag. There should be no space between the end of the asp:Image tag and the ending DIV tag. See this html markup screenshot. For instance, the html should look like this:
<div><asp:Image ID="Image1" runat="server" ImageUrl="images/header.gif" /></div>
The ending </DIV> or </ P> tag cannot be on a separate line or you will get a visible gap between the table cells when the page is viewed in Internet Explorer. (See Figure 2.) For example, make sure the html does not look like this:
<div><asp:Image ID="Image1" runat="server" ImageUrl="images/header.gif" />
</div>
Hopefully, these examples save you some valuable design time.
Keep in mind, I have yet to test this image cell/row div gap issue out in Internet Explorer 7.0, so Microsoft may or may not have changed how IE 7 renders a web page when there is white space between an image tag and a closing tag.