Hi all,
I've got a pair of DIVs in a TD, which a toggle the style.display
attribute on to simulate an expand/collapse section effect. I am seeing
occasional layout glitches under Firefox 1.5.0.11 in FC4, and 2.0.3 in
XP, but not in Explorer 6, Opera 9.2 or Konqueror 3.4.0-5.
I'm struggling to fix this so would appreciate any suggestions.
XHTML structure is as follows:
<table>
<col /><col />
<tr>
<td>
<!-- Button with onclick to JS to toggle .style.display state
(none | block) of collapsed / expanded divs-->
</td>
<td>
<div id='collapsed_x'>
<!-- Contains a table, with 'summary' (collapsed) content -->
</div>
<div id='expanded_x'>
<!-- Contains a table, with 'detailed' (expanded) content -->
</div>
<!-- JS to set initial .style.display state of both divs-->
</td>
<tr>
</table>
There are two (intermittent) symptoms:
* When the expanded div is shown the row height does not grow to the
size of the new content - the expanded div content is drawn over the top
of rows below.
* When the expanded div is hidden row height does not collapse.
http://www.oddlight.plus.com/ff_issue/failed.htm
The link above shows the problem (excuse the layout and extraneous divs
- I've stripped the code back). It is intermittent, but I can reliably
reproduce with the following:
1/ Set FF window tall and narrow. I used 283x928.
2/ Start the top and click each Edit button twice in turn. I see at
least one layout issue within a dozen clicks.
I have tried the following without success:
* Causing a reflow on each change, by resetting the class of a body
using Javascript, or by setting innerHTML to self.
* Removing the DIV about to be drawn from the DOM then re-adding it in
the same place.
I have not see problems if I simply replicate the xhtml for first row
many times, which suggests the column width may play a part.
The page validates successfully, and I don't see any JS errors.
I don't have a lot of HTML / CSS experience - does anyone have any
insights or ideas about how to correct this issue?
Regards,
Andy
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
