Table doesn't show right in IE

windows · Jan 9, 2008

I have been having some strange behaviour with a table: 
 
<a class="postlink" href="http://www.jokeawhenever.com/HQ/retailers/template2.htm">http://www.jokeawhenever.com/HQ/retailers/template2.htm</a> 
 
Only in IE does it not show correctly (just the top bar). The background seems to tile bigger than the actual TD height. All the images in the top row are all 77 pixels in height. 
 
Any suggestions? I'm totally stumped..

Thanks! 
 
- EdFix up the as many of the 53 [errors (<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jokeawhenever.com%2FHQ%2Fretailers%2Ftemplate2.htm&doctype=HTML+4.01+Transitional&charset=iso-8859-1+%28Western+Europe%29&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a>)] in the HTML code as you can, and see if the problem changes in any way. Should take about 10 minutes with a text editor. 
 
The tricky one is curing the entity errors. Change every & in the URLs to be & instead. That won't cure your problem, but will make the error list more managable to work with. 
 
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element. 
 
Make sure that the tags for one cell of table data are all on the same line and there are no gaps between the tags: 
<td><blah><blah><blah><blah><blah></td>I originally had this file offline and those errors (caused by an auto inserted banner ad and popup) were not there. I also had just the top row as a seperate table to test it out. But I had no success. 
 
I have tried doing the suggested changes locally (as I have no way of overriding what my host automatically inserts, and the problem still remains. 
 
Further suggestions?Looking at the source code of your page, your table structure appears to be very complex with multiple colspans and rowspans and almost impossible to follow where which cells should be. I think this may be responsible for cell misalignment. 
 
I would suggest simplifying the structure by using one table for the main structure, say 2 rows by 2 columns, and then inserting tables into some or all of these cells to give the finer structure you require. 
 
Hope this helps.I seem to have resolved the problem. The problem persisted even when I isolated the 1 row (3 cells) and created it as a seperate table on a test page. I remove one space between the <TD STUFF> </TD> tags.. and all of a sudden it showed correctly in IE!.. but it hsouldn't require more than 77 pixels of height to display 1 space! Very strange.. do you think this is a bug in IE? (It shows perfectly fine in other browsers!) 
 
Any technical reasoning would still be of interest even though I have solved the problem!.. I'm kinda curious as to why on earth it did this! 
 
- Ed

if you have this 
 
 
<td> blah blah blah </td> 
or this 
 
<td> 
blah blah 
</td> 
 
both of those will create a line break. in the past extra white space was ignored, but in newer browsers it is not. 
 
so make sure you have your cell on 1 line with no space between the cell tags on either end. 
 
<td>blah blah blah</td> 
 
like that. 
and it is not a bug but rather a feature

scoutt is right. I saved your site and removed some spaces which came just before the closing td:s. This is the modified code, just after the banner (the top bar, first <tr>): 
 
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0"> 
<TR HEIGHT="77"> 
<TD WIDTH="135" HEIGHT="77" BACKGROUND="images/topbackgroundstipe.gif"> 
<A HREF=http://www.htmlforums.com/archive/index.php/"/index.html"><IMG SRC="images/hq_01.gif" BORDER="0" WIDTH="135" 
HEIGHT="77" ALT="HQ Logo"></A></TD> 
<TD ALIGN="RIGHT" HEIGHT="77" BACKGROUND="images/topbackgroundstipe.gif"> 
<A HREF=http://www.htmlforums.com/archive/index.php/"/index.html"><IMG SRC="images/hq_02.gif" WIDTH="315" BORDER="0" 
HEIGHT="77"></A></TD> 
<TD ALIGN="LEFT" HEIGHT="77" BACKGROUND="images/topbackgroundstipe.gif"> 
<IMG SRC=http://www.htmlforums.com/archive/index.php/"images/hq_03.gif" WIDTH="350" HEIGHT="77"></TD> 
<TD WIDTH="25" HEIGHT="77"><IMG SRC=http://www.htmlforums.com/archive/index.php/"images/hq_04.gif" WIDTH="25" HEIGHT="77"></TD> 
</TR>Would it still show correctly with even one line of text on a table row that is 77 pixels high? I can understand if it was a few lines and it had to expand, but I would expect a single character not to force the height to expand?! 
 
Strange....like I said, the old browsers didn't worry about spaces. the new version do worry about them. and yes 1 space will create a line break: eg 
 
so yes it will expand that 1 line to 2 lines.The 53 HTML errors (<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jokeawhenever.com%2FHQ%2Fretailers%2Ftemplate2.htm&doctype=HTML+4.01+Transitional&charset=iso-8859-1+%28Western+Europe%29&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a>) can be quickly reduced to half a dozen or so by some very simple editing of the source code. Fix the entity, type and alt errors first. Should take about 10 minutes.There is only about 10 alt errors, when you remove the code auto inserted by my @#$@ host :-( Oh well, I am going to move soon anyhow! 
 
Thanks for your help guys! 
 
- EdThe way you should view it is that setting widths does not mean the table has to adhere to them. Scoutt is very correct. If you have set the the widths etc and have images that account for all that space then a single space between the tags will force your carefully planned structure apart. Widths are only guidelines and browsers are allowed to ignore them if they need to.The problem still occurs when I only use background images, and no actualy images in the cells. The single space seems to throw it all off! 
 
Thanks again! 
 
- Edagain you don't have it all on one line. 
 
<td ALIGN="LEFT" HEIGHT="77" BACKGROUND="images/topbackgroundstipe.gif"> 
<img SRC=http://www.htmlforums.com/archive/index.php/"images/hq_03.gif" WIDTH="350" HEIGHT="77"> </td> 
<td WIDTH="25" HEIGHT="77"><img SRC=http://www.htmlforums.com/archive/index.php/"images/hq_04.gif" WIDTH="25" HEIGHT="77"> 
</td> 
 
you have a space on the first cell and teh last cell's closing tag is on another line

Table doesn't show right in IE

windows

Guest