How to Get Rid of Whitespace Gaps between ASP.NET Images & Table Cells in Internet Explorer

Web page design problem with Internet Explorer.
by Updated January 23, 2010

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. 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. 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.

 


0
19

19 Comments

anonymous by Mike on 9/12/2006
I done pulled my hair out. I can't beleive your fix is the only one I found. After about 3 or 4 Google's and finally using about 10 keywords found your article on page 3 of the Google results.

You would think this would be all over the place.

But hey thanks
Doug by Doug on 9/12/2006
Hey Mike, glad this article was of use to you. I agree with you, and find it kinda odd that there is very little info out there on this problem. I know I wasn't able to find any results talking about the ie cell issue before writing this article.
anonymous by Matt on 9/26/2006
OH MY GOD!!!!!!!!!! 6 hours of stripping out code until I had only one table left and this is the problem that has been causing so much grief. Thanks for the solution really appreciate it.
Doug by Doug on 9/26/2006
Matt, I feel your pain. Before figuring out the solution to this problem I probably spent at least that much time screwing around with html code to get things to work right. I think I even scrapped a few layouts too!
anonymous by Chris Price on 9/28/2006
Well i knew how to fix this, however i am using XSL to translate XML to HTML, the MSXML transfrom method is reformatting the HTML and put the white space in.... help :(
anonymous by Dave on 12/12/2006
Like the others I was totaly stumped and scrapped a few layouts of my own.
Was tempted to put a disclaimer on the page saying IE sucked and it would only work with firefox.
Thanks again.
anonymous by SD on 1/17/2007
Like others, I spent a lot of time on this. Your article helped me halfway. I still can't solve this problem in code behind. Any more insight would be much appreciated...

I am having problems with GridViews. 1 solved, 1 Not Solved...
I am creating a GridView in aspx with a <ItemTemplate><asp:Image> field, I removed the spaces in the aspx file and worked like a charm. I create another GridView dynamically in code behind like gvGridView.Columns.Add(AImageField), the space is still there between the images. I tried the padding and height properties but no luck.

Any Ideas? Thx!
Doug by Doug on 1/17/2007
Hey SD, I'm really not sure how to solve your problem, but you might want to try getting rid of the <asp:ImageField and instead dynamically generate a <asp:TemplateColumn with the <asp:Image inside it.
anonymous by Sanjeev on 2/3/2007
Gr8! I found it very useful. Thanks a lot. I used to put </td> always at the next line to make page readable but that sucked me for 4 hours ;-(
Thanks !
anonymous by JMc on 2/15/2010
Thanks a million
anonymous by Strange on 7/28/2010
This is VERY strange because it does not make sense to me you got it working like that.
That did not do anything to me.
Is it because I use VS 2008 to do that?
Doug by Doug on 7/28/2010
Strange,

As far as I know, it shouldn't have anything to do with Visual Studio.net 2008. The gaps that I talk about in this article are due to an issue in Internet Explorer 6.
anonymous by Jeremy on 8/14/2010
You are a legend. I stopped building my website about a year ago due to not being able to figure out a work around for IE. Just came across your tip... LEGEND!!!
Doug by Doug on 8/14/2010
Hey Jeremy,

I really appreciate the praise! Hope you can re-start building your website now. Over the last 4+ years I've continued to build, design and code GotKnowHow.com from scratch, and it continues to be a work in progress. You can read the steps I took to learn how to build interactive websites here: https://www.gotknowhow.com/articles/how-to-get-knowledge...  

So don't let any problems stand in your way in the future, there's usually a solution to your problem, even if you may not know it yet, someone else probably does. Good luck with everything in the future!
anonymous by Johnny on 2/22/2011
Hi Doug,

Thanks for sharing this article. Regarding HTML emails, the email software we use to output our HTML code puts all closing </td> tags on to a new line consequently creating redundant whitespace on all table cells in IE. We don't know what's causing this new line </td> to occur. That aside, I don't suppose you know of a fix in 'inline tables' CSS which could be used to close up the gaps?

Your help would be much appreciated.

Many thanks,
Johnny
Doug by Doug on 2/22/2011
Hey Johnny,

I might try contacting the developers of the Email software you're using, to find out if they know of solution or fix to the problem. If you're using a email service like Aweber, Constant Contact, or Mailchimp then there's sure to be plenty of other people who have or are experiencing the same type of problem with the </td> tag being put on a seperate line. It should be an easy fix for a developer to make in order for the ending </td> tag to render on the same line.

Otherwise, you may see if you can convert the html Table tags to Divs and use CSS for the entire layout. Although, that may not be an option due to the email software you're using. It's hard to say, what the best solution for you will be, I'm not familiar with that much email software (I use MailChimp myself). At any rate, I'd certainly contact the makers of the software and see if they have any suggestions.

If you figure out a solution, certainly let me know.
anonymous by Dheeraj on 1/27/2012
Thanks a lot for this article. This should be one of the craziest bug ever with IE. Took 2 days to get this resolved, mainly because these article did not show up for most of our google search terms, I am adding few of those terms in my comment to help others searching using those terms -
1. Space between html table cell and image
2. Gap between html table border and image
3. Space issue with aligning image in table cell
Doug by Doug on 1/27/2012
Glad it helped Dheeraj... Sorry it took you a few days to find the article, so thanks for adding in some relevant search terms...

Curious, what version(s) of Internet Explorer you had this problem with... I know IE6, was what I was using when I wrote this article, but I'm wondering if this still happens in IE7, IE8, or IE9. I'm pretty sure this problem should be gone in IE9... Thanks!
anonymous by Andre on 4/4/2013
Thanks you solved my headache!

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:  

Comment:  
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


I would like to learn how to get the skills and education to be able to build interactive websites. Can you give me some help and explain how to get started?  more »

Adding a CSS border to an ASP.NET Image control was a mystery to me for the longest time. While you could easily use an html image and add the runat="server" to it and then add CSS, I really wanted to use an asp:Image control along with a CSS border....  more »

You may need to have an image refreshed automatically on a web page in ASP.NET to get the latest image. One instance where you might want the fresh image is if you upload an image that has the same file name as an already existing image file on the...  more »