Welcome to WebmasterWorld Guest from 3.226.243.10

Forum Moderators: open

Message Too Old, No Replies

Yet another table nesting difference between IE and Firefox

I need help!

     
9:35 am on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Hi all,

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&nbsp;</td>
<td class=tableCCellH align=left valign=top>Reference Number&nbsp;</td>

... like this 10 <TD></TD> pairs in total

</tr>

//
// This creates basically an empty line, this "colspans" properly
//

<tr>
<td colspan=10>&nbsp;</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&nbsp;</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>&nbsp;&nbsp;&nbsp;</td>
<td align=left valign=top>Fund Name&nbsp;</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.

11:17 am on Apr 23, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


Hi & Welcome to WebmasterWorld!
This works fine in IE and Firefox
I added a border to show how it spans OK, 10 cols on the top row and eight onthe bottom row.

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

>>>>>>>>

11:45 am on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Thanks for the reply but it does not work (I added the width=100% to the internal TD tag hoping that would be the answer with no luck).

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]

12:14 pm on Apr 23, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


Miguel
I looked at it in FF; yes it does not work properly
and furthermore it forces a lateral scroll which is a no no.
I do not know how it is done
but obviously when cliking on a + it only spans on one coll
it could be due to the work behind the HTML
however my suggestion should work, I could only assume that the non HTML script needs to be looked over
BTW
review our TOS [webmasterworld.com] No URL please.
12:28 pm on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Henry,

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!

12:49 pm on Apr 23, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10281
votes: 1048


I still code the old way, so update with ids and css as needed but you need two rows colspan 10...one for the blank line and a second for the nested 8 column table.

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>

1:07 pm on Apr 23, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


Tangor is on something.

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]

1:09 pm on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Thanks for your reply. The reason why two separate tables will not work is because more lines of the outside table will come after the inside table rendering is finished, hence the nesting.

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!

1:14 pm on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Henry,

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

1:19 pm on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Tangor,

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

1:35 pm on Apr 23, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


Miguel,
Go to Firefox
look for extensions, review them all, there is a bunch of neat choices.
Look for the "web developer tool bar"
1:54 pm on Apr 23, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10281
votes: 1048


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?

2:02 pm on Apr 23, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Tangor,

How can I send you the CSS?

Thanks again,
Miguel

2:36 pm on Apr 23, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10281
votes: 1048


After looking at the site, I see several items that must be checked...

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

4:52 pm on Apr 23, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


tangor
You do not need to get the CSS sheet
Use the same web dev tool from firefox
and get the CSS extension it allows to see a CSS sheet and even to "on the fly" apply changes and check for results when re uploaded
3:29 am on Apr 24, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Tangor,

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

10:25 am on Apr 24, 2006 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4449
votes: 11


Miguel
Do a digest of your post and start a new thread in CSS forum
12:46 am on Apr 25, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 23, 2006
posts:10
votes: 0


Thanks Henry, will do that in a minute! This is getting way more complicated of what I thought :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members