Closed Bug 60543 Opened 24 years ago Closed 24 years ago

Cell height not "minimizing" to transparent gif image size

Categories

(Core :: Layout: Tables, defect, P3)

Product:
Core
Component:
Layout: Tables
Platform:
x86
Windows 98
Type:
defect

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: gareth, Assigned: karnaze)

References

(
URL
)

Details

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
BuildID:    Unknown (actually N6, but earlier revs of Mozilla have this 
problem - hey, I have an old modem... can't download nightly builds)

http://homepages.ihug.com.au/~groth/test/n6.html has a simple table structure 
containing one horizontal cell (a row).  The table has a fixed width of 600 
pixels (px).  The cell itself has a fixed height of 3px - used by adding a 3 by 
3 pixel transparent gif image ... note in this case I've used a red 3x3 .gif 
image so it may be easily seen.  Normally the final result *should* be a "bar" 
of width 600px, height 3px, with whatever chosen cell color (none in this 
simple case).  Mozilla / N6 does not render the height correctly.

Reproducible: Always
Steps to Reproduce:
1. Load the given webpage link in IE / N4 / N6 / Mozilla

Or (if the page has been removed)

1. Create a 3px wide by 3x high .gif image, name it "3x3.gif";
2. Save the source featured in "Additional Information" to a .html file and put 
it in the same directory as the 3x3.gif image;
3. Load in Mozilla / N6.

Actual Results:  Displayed a 600px wide by XXpx (unknown height... about 23px) 
high table. 

It *seems* that Mozilla / N6 is trying to leave enough room (height) to fit 
text into the cell.

Expected Results:  Displayed a 600px wide by 3px high table.

I put the "severity" as normal, even though it's cosmetic... for those that 
have used fancy tables to create borders for their websites, the new release of 
Mozilla will destroy their site layout.

The code is shown below.

NOTE: You *must* include a REAL .gif image if you intend to use the following 
source.

If there is no "3x3.gif" image (or any image - just modify the code to suit the 
name, but make sure the gif image is small, i.e. under 5px by 5px), then N6 
will render the table as 600px wide by 1px high.

The "bug" can only be seen if you include a valid image.


Complete code:

====

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>
Test
</title>
</head>
<body>

<table cellpadding="0" cellspacing="0" width="600" border="1">
  <tr>
    <td><IMG SRC="3x3.gif" width="3" height="3" alt=""></td>
  </tr>
</table>

</body>
</html>

====
This bug is invalid, for reasons explained below.

Mozilla has two layout modes -- "strict" and "quirks".  The former is applied to
XHTML, HTML 4.0 strict, and HTML 4.0 Transitional with URI documents.  The
latter is applied to everything else.  Your document is HTML 4.01 Strict, so
it's laid out in strict mode.

In strict mode Mozilla follows the CSS2 box model as specified in the W3C CSS2
specification (http://www.w3.org/TR/REC-CSS2/).

In your particular case, the image is an inline element and is placed in a line
box, and according to http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting:

"The height of a line box is determined by the rules given in the section on
line height calculations. A line box is always tall enough for all of the boxes
it contains. However, it may be taller than the tallest box it contains (if, for
example, boxes are aligned so that baselines line up)."

So you have several options for getting the layout you want:

1) change the doctype to not be a strict doctype if you expect quirks layout
2) set the "display" style attribute for the image to "block") (eg <img
style="display: block" ... >).  Then there is no line box involved. This is
probably the preferred method for your case.
3) set the "line-height" style attribute for the table cell to be smaller than 3
pixels.  This will generate some really weird results if you ever put text in
that table cell.

Thanks for using Mozilla and reporting bugs!
Status: UNCONFIRMED → RESOLVED
Closed: 24 years ago
Resolution: --- → INVALID
Is there a reason that HTML 4.0 Transitional is layed out in strict mode but
HTML 4.01 Transitional is layed out in quirks mode - or is this another bug?

Every page I create I try to make fit the W3C standards - using their HTML
validator to check.  On a recent project, I set the doctype to HTML 4.0
Transitional which resulted in numerous warnings because the "name" attribute of
the IMG tag wasn't supported.  After changing the doctype to HTML 4.01 the page
validated fine, but in a menu I had created all of the rows are the same height
which really screws up the layout.  I tried using <IMG STYLE="display:
block;"...> however Netscape 4.x really screws up the page.  But I like
compatibility!  Is this an issue, or just something I should deal with?  It just
doesn't seem right to me....
QA contact update
QA Contact: chrisd → amar
*** Bug 94442 has been marked as a duplicate of this bug. ***
*** Bug 96297 has been marked as a duplicate of this bug. ***
*** Bug 114747 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.