281526 - Same HTML is being rendered differently on page reload (CSS 'display: table' problem)

Reporter

Description

•

20 years ago

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0

Here is the complete HTML:
---------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Clarify Case Suite&trade; 1.01</title>
<style type="text/css">
<!--
	html, body, form { margin: 0; padding: 0; width: 100%; font-family: Verdana,
Tahoma, Arial, Helvetica, sans-serif; font-size: 9pt; }
	html { height: 100%; }
	body { position: relative; min-height: 100%; color: #000000; background-color:
#319CCE; scrollbar-face-color: #319CCE; scrollbar-highlight-color: #319CCE;
scrollbar-shadow-color: #A6D3EA; scrollbar-3dlight-color: #A6D3EA;
scrollbar-arrow-color: #A6D3EA; scrollbar-track-color: #A6D3EA;
scrollbar-darkshadow-color: #A6D3EA; }
	* html body { height: 100%; }
	#header, #footer { position: absolute; width: 100%; margin:0; padding:0;
background-color: #A6D3EA; display: table; white-space: pre; }
	#header { top: 0; height: 29px; padding-top: 1px; }
	#footer { bottom: 0; padding: 3px 0 2px 0; text-align: right; }
	#footer p { display: inline; margin: 0; padding: 0 10px 0 40px; font-family:
Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #000000; font-size: 7pt; }
	#footer p.first { padding-left: 0; }
	#content { padding: 35px 5px 35px 5px; margin: 0; }
	a:link, a:visited { color: #232323; }
	a:hover, a:active { color: #555555; }
	form { padding: 4px 0 0 0; }
	select,input { position: relative; display: inline; margin: 0 0 0 5px; border:
1px solid black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
8pt; color: #000000; white-space: pre; }
	.textbox { padding: 2px 1px 1px 2px; }
	.button { padding: 0 5px 1px 5px; margin: 0 0 1px 5px; }
	.error { font-size: 10pt; font-weight: bold; }
	.warning { color: #FF0000; font-weight: bold; text-decoration: blink; }
	.found { padding: 20px 0 0 0; margin: 0; }
	#mainframe { margin: 0; padding: 0; border: 0; width: 98%; }
	#casehead { width: 100%; margin: 0 0 5px 0; padding: 3px 5px 3px 5px; border:
2px solid black; background-color: #CFFF88; font-family: Verdana, Tahoma, Arial,
Helvetica, sans-serif; color: #000000; font-size: 10pt; font-weight: bold; }
	#caseinfo { width: 100%; margin: 0 0 5px 0; padding: 3px 5px 3px 5px; border:
2px solid black; background-color: #FAFAFA; display: table; white-space: pre; }
	#caseinfo table { width: 100%; }
	#caseinfo table td { padding: 0 5px 0 0; font-family: Verdana, Tahoma, Arial,
Helvetica, sans-serif; color: #000000; font-size: 8pt; font-weight: normal;
text-align: left; white-space: pre; }
	#history { width: 100%; margin: 0; padding: 10px 5px 15px 5px;
background-color: #FAFAFA; border: 2px solid black; font-family: 'Courier New',
Courier, monospace; color: #000000; font-size: 9pt; font-weight: normal; }
	.help { width: 98%; margin: 0 0 25px 0; padding: 0; font-family: Verdana,
Tahoma, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; }
	.help th { text-align: left; font-weight: bold; padding: 2px; }
	.help th.heading { font-size: 11pt; border-bottom: 1px solid black; }
	.wide th { width: 310px; }
	.wide th.heading { width: 100%; }
	.heading { color: #000000; font-family: Verdana, Tahoma, Arial, Helvetica,
sans-serif; font-size: 8pt; font-weight: bold; }
	.highlight { font-weight: bold; color: #FFFF00; background-color: #333333; }
	.big { font-size: 12pt; }
	.bold { font-weight: bold; }
	.tblq { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; color:
#000000; font-size: 8pt; empty-cells: show; border: outset 0; border-bottom: 1px
solid #444444; border-spacing: 0px; margin: 20px 0 0 0; width: 100%; }
	.tblq tr { background-color: #46B1E3; }
	.tblq th { font-weight: bold; font-size: 8pt; text-align: center;
background-color: #1C87B9; border: inset 0; padding: 3px 5px 3px 5px; border:
1px solid #444444; border-left: 0; border-top: 2px solid #444444; }
	.tblq td { text-align: center; border: inset 0; padding: 4px 5px 4px 5px;
border-right: 1px solid #444444; border-bottom: 1px solid #444444; }
	.tblq *.left { border-left: 1px solid #444444; }
	.tblq td.lalign { padding: 2px 5px 2px 5px; text-align: left; }
	-->
</style>
</head>
<body onload="setSpacing()">
<div id="header"><form name="case_form" method="post" action=""><input
name="cid" type="text" value="Case ID" size="7" maxlength="7" class="textbox"
onfocus="this.select()" /><input name="mid" type="text" value="MBR ID" size="8"
maxlength="6" class="textbox" onfocus="this.select()" /><input name="dbs"
type="text" value="DBS ID" size="8" maxlength="7" class="textbox"
onfocus="this.select()" /><select name="ct">
<option value="none">Case Type</option>
</select><input name="ds" type="text" value="29.02.00" size="9" maxlength="8"
class="textbox" onfocus="this.select()" />&nbsp;&#8209;&nbsp;<input name="de"
type="text" value="08.02.05" size="9" maxlength="8" class="textbox"
onfocus="this.select()" /><select name="st">
<option value="none">Status</option>
<option value="o">Open</option>
<option value="c">Closed</option>
</select><input name="ss" type="text" value="Search String" size="28"
maxlength="90" class="textbox" id="txts" onfocus="this.select()" /><input
name="subm" type="submit" value="Fetch it!" class="button" /></form></div>
<div id="content">
<div style="display: table; white-space: nowrap; width: auto; margin: 10px 10px
10px 5px; padding: 15px; background-color: white; border: 2px solid black;
font-family: 'Courier New', Courier, mono; font-size: 12px;"><br
/>CLARIFY&nbsp;CASE&nbsp;SUITE&nbsp;&trade;&nbsp;&nbsp;&copy;&nbsp;2004-2005&nbsp;FERM/CTS<br
/>------------------------------------------------------------------------------------------------------------------------<br
/>&nbsp;<br />Release&nbsp;History:<br
/>------------------------------------------------------------------------------------------------------------------------<br
/>v1.01&nbsp;&nbsp;[07&nbsp;Feb&nbsp;2005&nbsp;16:38]&nbsp;--&nbsp;Changed&nbsp;SQL&nbsp;to&nbsp;allow&nbsp;cases&nbsp;with&nbsp;missing&nbsp;MEMBER&nbsp;ID/DBS&nbsp;ID&nbsp;(around&nbsp;4000&nbsp;cases&nbsp;more)&nbsp;(SQL)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tiny&nbsp;fix&nbsp;for&nbsp;missing&nbsp;line&nbsp;breaks&nbsp;in&nbsp;CSS&nbsp;generator&nbsp;code&nbsp;(affecting&nbsp;only&nbsp;HTML&nbsp;source)&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fixed&nbsp;ORACLE-&gt;MySQL&nbsp;synchronization&nbsp;code&nbsp;causing&nbsp;a&nbsp;synch&nbsp;without&nbsp;checking&nbsp;'if&nbsp;newer'&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nicer&nbsp;formatting&nbsp;of&nbsp;the&nbsp;help&nbsp;screen&nbsp;(HTML)<br
/>v1.00&nbsp;&nbsp;[31&nbsp;Jan&nbsp;2005&nbsp;01:30]&nbsp;--&nbsp;Full&nbsp;integration&nbsp;with&nbsp;Query&nbsp;Suite&trade;,&nbsp;codesharing&nbsp;and&nbsp;unified&nbsp;look&nbsp;&amp;&nbsp;feel&nbsp;(PHP,CSS)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As&nbsp;requested,&nbsp;it&nbsp;is&nbsp;now&nbsp;possible&nbsp;to&nbsp;get&nbsp;all&nbsp;cases&nbsp;for&nbsp;certain&nbsp;DBS_ID&nbsp;or&nbsp;LOC_ID&nbsp;(PHP,HTML)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As&nbsp;requested,&nbsp;the&nbsp;listbox&nbsp;for&nbsp;MEMBER&nbsp;ID&nbsp;has&nbsp;been&nbsp;replaced&nbsp;by&nbsp;a&nbsp;text&nbsp;field&nbsp;(HTML,PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VASTLY&nbsp;improved&nbsp;results&nbsp;highlighting&nbsp;code&nbsp;logic&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If&nbsp;'case&nbsp;XXXXX'&nbsp;is&nbsp;encountered&nbsp;in&nbsp;the&nbsp;Case&nbsp;History,&nbsp;it&nbsp;becomes&nbsp;an&nbsp;HTML&nbsp;link&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Help&nbsp;screen&nbsp;has&nbsp;been&nbsp;updated&nbsp;/&nbsp;new&nbsp;query&nbsp;examples&nbsp;(HTML)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Output&nbsp;is&nbsp;100%&nbsp;'XHTML&nbsp;1.0&nbsp;Transitional'&nbsp;compliant&nbsp;(HTML)<br
/>v0.70b&nbsp;[18&nbsp;Aug&nbsp;2004&nbsp;14:19]&nbsp;--&nbsp;Case&nbsp;Number&nbsp;in&nbsp;the&nbsp;browser&nbsp;window&nbsp;title&nbsp;-&nbsp;nice&nbsp;for&nbsp;bookmarking!&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Even&nbsp;better&nbsp;case&nbsp;formatting&nbsp;(PHP)<br
/>v0.60b&nbsp;[18&nbsp;Aug&nbsp;2004&nbsp;12:21]&nbsp;--&nbsp;Fixed&nbsp;small&nbsp;case&nbsp;history&nbsp;highlighting&nbsp;issues&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Swapped&nbsp;`status`&nbsp;and&nbsp;`dates`&nbsp;listboxes&nbsp;on&nbsp;top&nbsp;(HTML)<br
/>v0.50b&nbsp;[13&nbsp;Aug&nbsp;2004&nbsp;15:35]&nbsp;--&nbsp;Better&nbsp;case&nbsp;history&nbsp;structure&nbsp;highlighting&nbsp;(PHP)<br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exclusion&nbsp;of&nbsp;'junk'&nbsp;words&nbsp;in&nbsp;case&nbsp;history&nbsp;(PHP)<br
/>v0.40b&nbsp;[13&nbsp;Aug&nbsp;2004&nbsp;10:30]&nbsp;--&nbsp;Added&nbsp;search&nbsp;words&nbsp;highlighting&nbsp;in&nbsp;the&nbsp;case&nbsp;history&nbsp;(PHP,CSS)<br
/>v0.30b&nbsp;[12&nbsp;Aug&nbsp;2004&nbsp;22:10]&nbsp;--&nbsp;Beta&nbsp;status.&nbsp;All&nbsp;planned&nbsp;features&nbsp;are&nbsp;implemented&nbsp;(PHP)<br
/>v0.20a&nbsp;[22&nbsp;Aug&nbsp;2004&nbsp;11:45]&nbsp;--&nbsp;Changed&nbsp;MySQL&nbsp;to&nbsp;FULL&nbsp;TEXT&nbsp;search&nbsp;(boolean&nbsp;mode).&nbsp;It&nbsp;rocks!!!&nbsp;(SQL)<br
/>v0.10a&nbsp;[09&nbsp;Aug&nbsp;2004&nbsp;15:53]&nbsp;--&nbsp;Initial&nbsp;Alpha&nbsp;Version&nbsp;--&nbsp;slightly&nbsp;ugly&nbsp;output&nbsp;&nbsp;;)<br
/>&nbsp;<br />&nbsp;<br />Known&nbsp;Issues:<br
/>------------------------------------------------------------------------------------------------------------------------<br
/>*&nbsp;Extra&nbsp;line&nbsp;breaks&nbsp;&quot;&lt;br&nbsp;/&gt;&amp;nbsp;&quot;&nbsp;are&nbsp;left&nbsp;at&nbsp;the&nbsp;end&nbsp;of&nbsp;case&nbsp;history&nbsp;HTML<br
/>*&nbsp;IE5&nbsp;does&nbsp;not&nbsp;properly&nbsp;display&nbsp;the&nbsp;footer&nbsp;CSS&nbsp;(probably&nbsp;needs&nbsp;HTML/CSS&nbsp;rewritten&nbsp;specifically&nbsp;for&nbsp;it)

</div></div>
<div id="footer"><p class="first">Generated in 0.0107 sec</p><p>Last updated:
07.02.05 23:35</p><p>Total cases: 48532&nbsp;     &nbsp;Open Cases:
911</p><p>Clarify Case Suite&trade; &nbsp;v<a
href="/rsm/db/cs.php?show=history">1.01</a>  &copy; 2004-2005  FERM/CTS</p></div>
</body>
</html>

Reproducible: Sometimes

Steps to Reproduce:
1. Load the page in FireFox
2. Hit 'Reload' many times
3. Once in a while (about 1 times out of 10) the page will be displayed oddly.

Actual Results:  
The text inside <div style="display: table; white-space: nowrap; ..."> ...
</div> gets "truncated" after the line:

"VASTLY improved results highlighting code logic (PHP)"

but the footer is still being displayed below.

Expected Results:  
The text should be displayed fully, just as it is most of the times.

Removing the CSS property "display: table;" seems to cure the problem (but the
resulting ouput is not the same as originally intended)

Andrei Nazarenko

Reporter

Comment 1

•

20 years ago

Attached file The problematic HTML — Details

Andrei Nazarenko

Reporter

Updated

•

20 years ago

Version: unspecified → 1.0 Branch

José Jeria

Comment 2

•

20 years ago

WFM: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b) Gecko/20050205
Firefox/1.0+

Reloaded page about 20 times and it looked ok every time. closing.

Please reopen if you can reproduce with a nightly trunk build.

Status: UNCONFIRMED → RESOLVED

Closed: 20 years ago

Resolution: --- → WORKSFORME

Andrei Nazarenko

Reporter

Comment 3

•

20 years ago

Tested with the 09 Feb 2005 trunk build.

The problem with dissapearing text is gone, but not all is perfect either.
Just as before, once out of 10-15 times additional *epmty lines* appear in the
text in arbitratry places.

I am attaching another HTML file to try.

Status: RESOLVED → UNCONFIRMED

Resolution: WORKSFORME → ---

Version: 1.0 Branch → Trunk

Andrei Nazarenko

Reporter

Comment 4

•

20 years ago

Attached file The 2nd HTML for testing — Details

José Jeria

Comment 5

•

20 years ago

How about a screenshot that show the issue?

Assignee: firefox → nobody

Component: General → Layout

Product: Firefox → Core

QA Contact: general → layout

Andrei Nazarenko

Reporter

Comment 6

•

20 years ago

Attached image This is how it should look *always* — Details

Andrei Nazarenko

Reporter

Comment 7

•

20 years ago

Attached image This is how it looks *sometimes* — Details

Boris Zbarsky [:bzbarsky]

Comment 8

•

20 years ago

This is basically bug 148810

Depends on: 148810

Gervase Markham [:gerv]

Comment 9

•

19 years ago

This is an automated message, with ID "auto-resolve01".

This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.

While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.

If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.

The latest beta releases can be obtained from:
Firefox:     http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey:   http://www.mozilla.org/projects/seamonkey/

Daniel.S

Comment 10

•

16 years ago

Could be me, but I think this is more frequently happening on trunk.

Status: UNCONFIRMED → NEW

Ever confirmed: true

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Updated

•

16 years ago

Status: NEW → RESOLVED

Closed: 20 years ago → 16 years ago

Resolution: --- → DUPLICATE

Bugzilla

Quick Search

Same HTML is being rendered differently on page reload (CSS 'display: table' problem)

Categories

(Core :: Layout, defect)

Tracking

()

People

(Reporter: subscription, Unassigned)

References

(
URL
)

Details

Crash Data

Security

(public)

User Story

Attachments

(4 files)

Description

Comment 1

Updated

Comment 2

Comment 3

Comment 4

Comment 5

Comment 6

Comment 7

Comment 8

Comment 9

Comment 10

Updated

Attachment

General

Description

File Name

Content Type

The problematic HTML 20 years ago Andrei Nazarenko 11.53 KB, text/html		Details
The 2nd HTML for testing 20 years ago Andrei Nazarenko 22.55 KB, text/html		Details
This is how it should look always 20 years ago Andrei Nazarenko 21.84 KB, image/png		Details
This is how it looks sometimes 20 years ago Andrei Nazarenko 21.31 KB, image/png		Details