Removing Mysterious Blank Space from Above a Table in IE7

October 11th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

I know, I know… HTML tables are old school, out of date and uncool. Regardless of this fact however they will always be used on some sites and admittedly, I even use them myself in certain circumstances.

I came across an issue recently however when cross-browser testing a page where I was receiving a huge white space above a table in Internet Explorer 7 that I couldn’t explain. There was no reason for the space to be there; no line breaks, no margins, nothing.

After digging around a bit I finally discovered that the cause of the issue was content being included between the <table> tag and the <tr> tag. An example of what I mean is as follows:

<table width="100%" cellpadding="2" cellspacing="0">
	<form name="form1" action="" method="post">
			<td>Content Here</td>
			<td>Content Here</td>

Notice how I have form tags between the opening and closing table and row tags? Removing these and structuring the table correctly resolved the miscellaneous space.

This entry was posted on Monday, October 11th, 2010 at 9:29 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (1)
  1. This was exactly what I was looking for. Thank you!!