Closed Bug 158872 Opened 22 years ago Closed 22 years ago

xhtml layout not ok (same problem with NS6+)

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: pierre-yves.uytdenhoef, Assigned: attinasi)

References

(
URL
)

Details

Attachments

(2 files)

XHTML file that doesn't work as expected
1.24 KB, text/html
Details
transparent gif file (1px on 1px) used in the sample.
43 bytes, image/gif
Details 
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.0) Gecko/20020530
BuildID:    2002053012

I'm trying to display a 1px high line using a table, a transparent gif file and
style.

The line is displayed well in HTML but not in XHTML (just comment or remove the
DOCTYPE from the below code and it will work).  I have the same problem with
Netscape 6+ on PC and Mac (I guess it is not platform dependant).

Note: you have to create a transparent .gif file (1px on 1px) named clear.gif
and copy it in the same directory as the xhtml file to see the results.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css"><!--
	tr.trline { background-color: #ffaf47 }
	td.tdline { background-color : #099; height: 1px }
	.text { color: black; font-size: 11px; font-family: Helvetica, Arial, sans-serif }
// -->
</style>

<title>XHTML bug in Geko (Netscape 6+ and Mozilla)</title>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" width="568" height="1">
<tr class="trline">
	<td height="1"><img height="1" width="1" alt="" src="clear.gif" /></td>
</tr>
<tr>
	<td class="text">
	<b>This page illustrate a bug in the XHTML (XML?) engine of Netscape 6+ and
Mozilla</b>
	<br />
	The orange and green lines are supposed to be 1 pixel high.
	<br />
	clear.gif is a 1 pixel on 1 pixel transparent gif file.
	<br />
	If you comment the DOCTYPE, the page is parsed as HTML and it works fine.
	</td>
</tr>
<tr>
	<td class="tdline" height="1"><img height="1" width="1" alt="" src="clear.gif"
/></td>
</tr>
</table>

</body>
</html>



Reproducible: Always
Steps to Reproduce:
1. copy/paste the xhtml code from the description to your favorite editor.
2. save the xhtml file somewhere on your harddisk drive
3. create a transparent gif file (1 pixel on 1 pixel), name it clear.gif and
save it in the same directory as the xhtml file.
4. run Mozilla or Netscape 6+ and open the file

Actual Results:  the is a big orange block above the text on the xhtml page and
a big green block below the text.

Expected Results:  a 1 pixel high orange line above the text and a 1 pixel high
green line below the text.

if you open the xhtml file with Internet Explorer or Netscape 4, it works.
If you comment or remove the DOCTYPE from the xhtml file, the file is parsed as
a HTML file instead of an XHTML file and it works.

-> if you find a solution to have this page working as expected (but in XHTML)
in the current Mozilla/Netscape6+ browers, I'm very interested !!!

(please mail me to pierre-yves.uytdenhoef@belgacom.be)
This is not a bug.  The DOCTYPE you are using invokes specific CSS-2 rules that
cause the display you see.  It is also not an XHTML vs. HTML issue.  If you use
a HTML 4.01 Transitional DOCTYPE you will get the same effect.  See
http://developer.netscape.com/evangelism/docs/articles/img-table/ for the
explanation.

This behavior will be changing in post 1.0 releases.  If you try a current build
you will see different behavior.  See
http://mozilla.org/docs/web-developer/quirks/doctypes.html
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → INVALID
Pierre-Yves, see
http://evolt.org/article/New_DOCTYPE_sniffing_in_upcoming_Mozilla_releases/1/32271/
for a better explanation and a workaround. It's *not* a bug, Mozilla behaves
like defined in the standard.

It's one of those differences between standards-mdoe and quirks-mode. Mozilla
1.1b contains an 'almost standards mode' (based on the DOCTYPE) to work around
this problem. Your transitional DOCTYPE will also trigger this mode, and it
works fine in Mozilla 1.1b

I've had the same problem on my website, but I was able to work around the bug
by adding style="display:block" to each image in a table. See the code of
http://www.bluesweb.org/bands.phtml for an example.
QA Contact: petersen → moied
verified invalid
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: