Removing Mysterious Blank Space from Above a Table in IE7
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"> <tr> <td>Content Here</td> <td>Content Here</td> </tr> </form> </table>
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.