Forum Moderators: open
Apologies ahead for the trouble but I am diying for help. I am developing a web page for a client and everything works perfectly in IE. The client did some stats research and more than 25% of the hits to the site are coming from firefox users (surprised? no at all!)
The problem is that I have a table nested within another table, and it does not do a collum span properly in Firefox. Here is portion of the code:
<table class=tableClient width=100% cellpadding=0 cellspacing=0 border=2>
//
// This part is the header of the external table
//
<tr class=headerText>
<td class=tableCCellH align=left valign=top>Investment Name </td>
<td class=tableCCellH align=left valign=top>Reference Number </td>
... like this 10 <TD></TD> pairs in total
</tr>
//
// This creates basically an empty line, this "colspans" properly
//
<tr>
<td colspan=10> </td>
</tr>
//
// The first line of data in the external table
//
<tr class=trOdd>
<td class=tableCCell align=left valign=top>FPI Flexible Growth Plan</td>
<td class=tableCCell align=left valign=top>12345678 </td>
... like this yet 10 <TD></TD> pairs in total
</tr>
//
// Here is where I create the nested table
// The problem is that I want the table to span
// accross all columns of the external table
// without changing the way its columns are shown
//
// That is why I created a new table within the
// <TD Collspan=10> TAG but does not work for
// Firefox although works excellent for IE (weird
// it is usually the other way around)
//
<tr id=tbl0 style='display:none;'>
<td align=center colspan=10>
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td align=left valign=top> </td>
<td align=left valign=top>Fund Name </td>
... like this EIGHT <TD></TD> pairs
</tr>
</table>
</td>
</tr>
</table>
As you can see the external table has ten columns, while the internal table has only eight. That is the reason why I decided to do a nested table within the TD tag of the external table, since I thought I could "colspan" it to the width of the external table.
Any answer, idea, anything at all will be highly appreciated.
<<<<<<<<
<html>
<table width="100%" border="1">
<tr>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
<td width="10%">
aaaaa
</td>
</tr>
<tr>
<td width="100%" colspan="10">
<table width="100%" border="1">
<tr>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
<td width="12.5"%>
bbb
</td>
</tr></table>
</table>
</html>
>>>>>>>>
Perhaps I over simplify the problem, trying to explain what I think the problem is instead of explaining the behaviour itself. You can see the problem at this site: <snip>, click on the demo button and then try to expand any of the + signs. In IE works well, in Firefox does not.
Apologies for the amount of code on that site, but as you might noticed, this site being rendered by ASPX files and there is a lot of C# code in the back doing God knows what to the final HTML pages.
If you can take a look at the site I just mentioned and tell me what is wrong, I will strongly appreciate it.
Thanks,
Miguel
[edited by: encyclo at 1:18 pm (utc) on April 23, 2006]
[edit reason] no links to personal sites please, see forum charter [/edit]
Thanks for your reply again. Apologies for the URL, I just read the TOS completely. This site is only for private clients of that company, I hope you understand I did not try to do a self promotion.
Anyway, my point is that looking at the HTML code generated by the page, it should work in Firefox but it does not; as you properly said it spans to only one column, when it is clearly written that the cell should span to all columns within the outside table.
I am willing to send the HTML code generated by the page via sticky mail to whoever is willing to help me. I seriously ran out of resources and I do not have any other answer except a bug in Firefox; but by the way, the same thing happens in Safari. That is why it can not be a bug, but a simple problem somewhere that I can not see.
Does anyone has any other idea? Thanks!
Is there any reason why separate tables are not desired?
<table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td colspan="10">THE BLANK LINE</td>
</tr>
<tr>
<td colspan="10">
<table width="100%" border="1" align="CENTER"><tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr></table>
</tr>
</table>
However I looked at the full code src
(I got it through my Firefox developer tools)
as is it won't be crossbrowser unless the first table is ended.
Instead of extending the first one up to 3 levels
Further you have a few CSS errors
Error: Error in parsing value for property 'DISPLAY'. Declaration dropped.
Source File: [example.com...]
Line: 66
same with
Line: 18
[edited by: encyclo at 1:18 pm (utc) on April 23, 2006]
[edit reason] examplified [/edit]
After the inside table with 8 collumns is finished, more lines will come via <TD></TD> pairs of 10 collums like the table outside. Eventually I could create a table per line and that would solve the nesting problem, but neither Firefox nor Safari should behave the way they are behaving.
Any other idea? Thanks!
Can you point me out what tools you used to find out that the table is not finished? I can see the three endings </table> in the code generated by rendering the web site.
I know this site is a mess, but as I said, there are so many lines of C# code behind that it is tough to follow on every single detail. Will look at the CSS closer later.
Thanks for your help,
Miguel
I did not look closely to the code you are proposing. But after looking carefully, that is exactly what I am doing and it does not work neiher for Firefox nor Safari. Obviously is a bit more complicated then that but it is kind of the same.
If you compare what you propose with my original problem, can you tell me where is the difference?
Thank you all for looking into this!
Miguel
I did not look closely to the code you are proposing. But after looking carefully, that is exactly what I am doing and it does not work neiher for Firefox nor Safari. Obviously is a bit more complicated then that but it is kind of the same.
If you'll send your css file it might be helpful because the simple nested table I sent should work in ALL BROWSERS (it works in my Firefox, IE, and NS7) because it is pure table code done the OLD WAY. Perhaps something in your width/padding/margins in the css styles is not correct for the nested table?
How can I send you the CSS?
Thanks again,
Miguel
In at least one section is a declaration for colspan 11 inside a colspan 10 row!
Check all colspan statements and count all the columns.
I counted SEVEN in some rows, not eight.
That said, the tables rendered in my Firefox, except the last two--had to click twice to get the display.
All subtables are half the screen. Readable, but not 100% of the nested 100%
IE is VERY FORGIVING as regards tables. Most of the time it will render tables perfectly even if the closing tags are not included, THEREFORE: Compose tables for any browser EXCEPT IE...those browsers will force input of valid code to display.
Might make use of a codesweeper to validate the table code. Layout appears headed in the right direction.
For development purposes I always start simple, like the table I suggested, then get complicated. That way when something breaks you know where it happened. :)
You are a genius! At least you gave me a very good idea to find the problem: I saved the rendered page as html and started striping things away until I came to something really small, but still with the problem.
Finally after I change this line in the row where I nest the inside table:
<tr id=tbl0 style='display:block;'>
... to this line:
<tr id=tbl0 style='display:;'>
then the inside table renders perfectly in Firefox and IE, but now renders worst in Safari :) I guess you can never be happy with those browsers.
Anyway, partially my problem is solved. Thanks Henry and Tangor for your help!
As a second note, does anyone knows a good resource explaining the behaviours of the 'style' attribute in different browsers?
Miguel
