Martijn,
Thanks for your comments.
I also can't reproduce the redraw problem in Firefox (Minefield)
3.0a5pre in Windows XP.
Our users predominately use Firefox 1.5 (migrating to 2.0 over time), so
I need a fix/workaround for these versions.
I have tried forcing a reflow by changing the .style.outline property of
the div (see below), and this has no affect. I've also tried swapping
the style class on the document body with no affect. Slightly resizing
the window forces a reflow (obviously!) and the document does reflow
correctly in this instance.
Its as if the layout engine is sometimes calculating the height of the
contained div incorrectly when the elements in the div require
wrapping. Is there anyway to force a recalculation (basically
simulating what happens when the window is resized)?
I'm not sure how to use .offsetHeight to 'fix' this issue? Could you
give my limited knowledge of CSS/HTML a push in the right direction ;)
Regards,
Andy
function showElementPolicy( element_id )
{
document.getElementById( element_id ).style.display = "block";
// Forcing a reflow does not fix the problem...
document.getElementById( element_id ).style.outline='1px solid
transparent';
document.getElementById( element_id ).style.outline='0px';
}
function hideElementPolicy( element_id )
{
document.getElementById( element_id ).style.display = "none";
// Forcing a reflow does not fix the problem...
document.getElementById( element_id ).style.outline='1px solid
transparent';
document.getElementById( element_id ).style.outline='0px';
}
Martijn wrote:
> This seems to be fixed on trunk, could you also test?
> http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
>
> You could try and 'fix' this issue perhaps by calling .offsetHeight
> Otherwise, you could do a .style.outline='1px solid transparent' and
> then a .style.outline='0px' to force a reflow.
>
> Regards,
> Martijn
>
> 2007/4/30, Andy Cordwell <[EMAIL PROTECTED]>:
>
>> 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
>>
>>
>
>
>
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
