301919 - Using XHTML Strict Causes Rendering Problems With CSS Controlled Width/Height On Tables

Status: RESOLVED DUPLICATE of bug 22274

(Core :: CSS Parsing and Computation, defect)

Description

[Ken]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

If you refer to
http://dohpaz.mine.nu/firefox/firefox_xhtml_strict_rendering_bug.html you will
get a visual description of the problem, but I will try to explain it here as
best as I can:

I am using XHTML Strict to render--admittedly complex/busy--tables that will
give the effect of both some rounded edges and drop shadows. In doing so, I need
to be able to control the width and height of specific cells so the layout
remains consistent.

In Firefox, I've found that the tops and bottoms of my complex tables do not
respect the height attribute of my CSS, causing the images (which are applied
via background-image attributes) to repeat, making it look like it's double-stacked.

I rewrote my tables in HTML 4.01 to simplify things, and everything looked as I
expected. It was when I reverted my rewrite back to XHTML that the above
happened again. As a test, I removed my doctype from my final source and found
that it was the Strict that was throwing it off.

To work around this problem, I simply changed Strict to Transitional and
everything now renders fine. The working copy can be found at
http://dohpaz.mine.nu/firefox/firefox_xhtml_transitional_working.html

The only change between the two files is the doctype line (2nd line of both
pages). And, while I can live with this minor change, I felt it was prudent to
file a bug report--which I could not find a mention of, but might have
accidentally overlooked--so if this is a duplicate, I apologize profusely as I
know you all are very busy making a 99.9999999% perfect web browser. Thank you. :)

Reproducible: Always

Steps to Reproduce:
http://dohpaz.mine.nu/firefox/firefox_xhtml_strict_rendering_bug.html - Shows
the double-stacking effect of some table cells due to not properly rendering CSS
height adjustments.
Actual Results:  
Renders improperly.

Expected Results:  
http://dohpaz.mine.nu/firefox/firefox_xhtml_transitional_working.html - Plays
happily and nicely with everything and everyone.

In Windows I am using Firefox 1.04; I have also tested these pages in Linux,
using Firefox 1.06 and the same things happen as described. Also, feel free to
ask for ANY clarification; I will do my best to accommodate accordingly.

Comment 1

[José Jeria]

Please attach a minimized testcase (remove all redundant html) showing the issue
https://bugzilla.mozilla.org/attachment.cgi?bugid=301919&action=enter

Comment 2

[Ken]

José: Per your request, I have simplifed both the non-working and the working
copies on my server down to one stylesheet and one table. 

Just a little ideology behind the stylesheet, and table: I basically broke each
cell into "grids" so I could more accurately control their sizes in a uniform
manner (grid 1, grid 2, etc) from left to right/top to bottom. They mainly
consist of a background color/image and a width and/or height of either auto,
5px, 6px, or 10px.

Also, for the record, I have tried placing the images using the <img> tag, with
the same results. Switching to background-image in CSS was during the course of
my testing.

Comment 3

[Ken]

Attachment: Simplified example of non-working Strict XHTML

Comment 4

[Ken]

Attachment: Simplified example of working Transitional XHTML

Comment 5

[José Jeria]

hm, that testcase looks good locally

Comment 6

[Stefan [:stefanh]]

Hmm... i haven't looked through all the code, but it looks like this problem is
caused by the images ("<img src="images/spacer.gif" width="1" height="1" alt=""
/>") in the table cells.

In strict rendering mode, the images "sits" on the baseline of the inline boxes.
See http://developer.mozilla.org/en/docs/Images%2C_Tables%2C_and_Mysterious_Gaps
for more info.

Comment 7

[Ken]

Stefan: Thank you very much! Following the fix in the document you provided, I 
added a line to my CSS (img { display: block; }) and now the layout shows fine 
in Strict mode. I'm sorry to have made a fuss, but thank you very much for 
pointing me in the right direction.

Should I close this bug, or is that something you guys do?

Comment 8

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

*** This bug has been marked as a duplicate of 22274 ***