Why doesn't FireFox expand or contract tables?

A

Andrew Bailey

Hi,

I thought this would be a simple problem to solve but 8 hours of Googling
and trying various suggestions hasn't yielded any working solutions so I'd
like to ask this group.

I have a table with two cells, within each of these cells there is a table
with a single cell. When the content of one inner cell expands it should
force the other table to expand.

It works fine in IE7 but fails in Firefox.

Here's a code snippet (see source of example url for a more complete
version)...


<table width="100%" height="260">
<td width="*" height="100%" valign="top">

<table width="100%" height="260">
<td valign="top">

When this content is expanded...

</td>
</table>

</td>
<td width="150" height="100%" valign="top">

<table width="100%" height="100%">
<td valign="top">

This table should expand too.

</td>
</table>

</td>
</table>


Here is a link to a test example...

http://www.microbuild.com/microbuild/test/expanding_table.html


THE QUESTION:

How can I make the blue table (see example url) expand and contract when the
content of the green table is expanded or contracted in Firefox?



Many thanks

Andy
 
H

Harlan Messinger

Andrew said:
Hi,

I thought this would be a simple problem to solve but 8 hours of
Googling and trying various suggestions hasn't yielded any working
solutions so I'd like to ask this group.

I have a table with two cells, within each of these cells there is a
table with a single cell. When the content of one inner cell expands it
should force the other table to expand.

It works fine in IE7 but fails in Firefox.

Have you tried using CSS instead of the long-since outmoded practice of
using height and width attributes in HTML to control the dimensions of
elements?
 
J

Jeremy J Starcher

Hi,

I thought this would be a simple problem to solve but 8 hours of
Googling and trying various suggestions hasn't yielded any working
solutions so I'd like to ask this group.

I have a table with two cells, within each of these cells there is a
table with a single cell. When the content of one inner cell expands it
should force the other table to expand.

It works fine in IE7 but fails in Firefox.

[table snipped]

THE QUESTION:

How can I make the blue table (see example url) expand and contract when
the content of the green table is expanded or contracted in Firefox?


GranParadiso/3.0a8 (Firefox 3.0 beta) works like you desire.

A few moments in Fx 2.5 didn't yield any quick fixes.


That said, nesting tables is rarely (if ever) a good idea. If you are
trying to do this for layout purposes, nested DIVS will give you a much
better layout that is also more accessible.
 
E

Els

Andrew said:
<table width="100%" height="260">

How can I make the blue table (see example url) expand and contract when the
content of the green table is expanded or contracted in Firefox?

Not tested, but I think if you take the 260 height off both the other
tables, your problem will be non-existent. The 100% height on the
table with the blue border is 100% of the height that is *set* on the
parent, which is 260px. Do you for any reason need the 260px height?
 
A

Andrew Bailey

Harlan Messinger said:
Have you tried using CSS instead of the long-since outmoded practice of
using height and width attributes in HTML to control the dimensions of
elements?

Hi Harlan,

I've added an identical example table to the url using css, but as you can
see it behaves exactly the same as the original. I think it's one of those
things where Firefox is probably obeying some standard to the letter even
though it's dumb.

Thanks for looking

Andy
 
A

Andrew Bailey

Els said:
Not tested, but I think if you take the 260 height off both the other
tables, your problem will be non-existent. The 100% height on the
table with the blue border is 100% of the height that is *set* on the
parent, which is 260px. Do you for any reason need the 260px height?

Hi Els,

I need the table to initially render to a height of 260, so yes that bit is
deliberate.

What I should then be able to do is specify 100% from that point on as 100%
would equal 100% of 260 but once again I'm thwarted by Firefox (works fine
in IE of course) as the green table will expand as expected (even though the
blue won't) but then stays expanded and doesn't shrink.

Thanks for looking


Andy
 
A

Andrew Bailey

You're asking for 100% height of an auto-height container.

YEP... that's exactly what I want.

Firefox is well within the CSS spec to ignore the 100% and give you auto
instead.

Seems like Firefox is too correct for it's own good if you ask me ;)


So then, how do I achieve what should be very simple behavior in Firefox?



Thanks for looking


Andy
 
A

Andrew Bailey

Andrew Bailey said:
Hi,

I thought this would be a simple problem to solve but 8 hours of Googling
and trying various suggestions hasn't yielded any working solutions so I'd
like to ask this group.

I have a table with two cells, within each of these cells there is a table
with a single cell. When the content of one inner cell expands it should
force the other table to expand.

It works fine in IE7 but fails in Firefox.

Here's a code snippet (see source of example url for a more complete
version)...


<table width="100%" height="260">
<td width="*" height="100%" valign="top">

<table width="100%" height="260">
<td valign="top">

When this content is expanded...

</td>
</table>

</td>
<td width="150" height="100%" valign="top">

<table width="100%" height="100%">
<td valign="top">

This table should expand too.

</td>
</table>

</td>
</table>


Here is a link to a test example...

http://www.microbuild.com/microbuild/test/expanding_table.html


THE QUESTION:

How can I make the blue table (see example url) expand and contract when
the content of the green table is expanded or contracted in Firefox?



Many thanks

Andy

Hi all,

It would seem that the solution is to switch the entire table (or rather
further up the mark-up tree). I have appended a third working example to the
test url.

Thanks for feedback and comments.

Andy
 
B

Bergamot

Andrew said:
I have a table with two cells, within each of these cells there is a table
with a single cell. When the content of one inner cell expands it should
force the other table to expand.

It works fine in IE7 but fails in Firefox.

http://www.microbuild.com/microbuild/test/expanding_table.html

Why do you need a nested table in that second cell? What happens if you
get rid of that nested table and put the blue borders around that td
instead?

BTW, you should clean up that code. You have an invalid <style> element
within the body. It belongs in the head section, plus it needs the
required type attribute.

Invalid code can be a cause of rendering issues in different browsers.
Validated code eliminates code errors as a source of problems.
 
R

richard

Hi,

I thought this would be a simple problem to solve but 8 hours of Googling
and trying various suggestions hasn't yielded any working solutions so I'd
like to ask this group.

I have a table with two cells, within each of these cells there is a table
with a single cell. When the content of one inner cell expands it should
force the other table to expand.

It works fine in IE7 but fails in Firefox.

Here's a code snippet (see source of example url for a more complete
version)...


Two tables work independently of each other regardless of where they
are placed. So expecting two adjoining rows to expand together is not
gonna happen.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top