Closed Bug 153010 Opened 23 years ago Closed 18 years ago

{inc}[RR]Adding CSS stylesheet dynamically causes gaps between table columns

Categories

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

Product:
Core
Component:
Layout: Tables
Type:
defect

Tracking

()

Status:
RESOLVED WORKSFORME
Milestone:
Future

People

(Reporter: mozilla_dev, Unassigned)

Details

(Whiteboard: XSLT DHTML)

Attachments

(3 files, 4 obsolete files)

xhtml.css
181 bytes, text/css
Details
xhtml.xml
2.20 KB, text/xml
Details
html testcase, add style link by clicking the button
2.56 KB, text/html
Details
I just hit a weird but which is triggered by including an external CSS stylesheet via XSLT. The code below tiles 9 images inside a table using CSS to set the <img> 'display' to 'block' and the <table> 'padding' to '0px'. The result should be a composite image with *no* gaps between the rows/columns. When I embed my CSS stylesheet using inline CDATA, everything works as it should. Unfortunately, when I import an external stylesheet using either '@import' or '<link>', I end up with gaps in-between the columns. I have highlighted these gaps in RED by including 'table { background-color: #FF0000; }' in the stylesheet. The straight XHTML version of this code (also appended below) works fine with an external stylesheet. For some reason, though, I had to add 'valign="bottom"' to the <td> tag on the center image to prevent the image from dropping down below the bottom of the frame?! I'm will be entering this as a seprate bug shortly.... ---------------------------- BROKEN-xslt.xml ------------------------------------ <?xml version="1.0" encoding="iso-8859-1" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <!-- Output definition --> <xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/> <!-- Main template --> <xsl:template match="/"> <html> <head> <title>External CSS Stylesheet Bug</title> <!-- The following two methods for attaching a CSS stylesheet result in gaps between the columns.... --> <link rel="stylesheet" type="text/css" href="xhtml.css"/> <!--<style type="text/css"><![CDATA[ @import url(xhtml.css); ]]></style>--> <!-- The page displays correctly with the CSS stylesheet embedded inline as follows.... --> <!--<style type="text/css"><![CDATA[ html { background-color: #4f4e4e; } table { background-color: #FF0000; } img { display: block; border: 0px; } table, td { padding: 0px; } ]]></style> --> </head> <body> <table cellspacing="0"> <tr> <td><img src="http://images.ibink.com/images/photoFan2_01.gif" width="16" height="20" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_02.gif" width="204" height="20" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_03.gif" width="11" height="20" alt=""/></td> </tr> <tr> <td><img src="http://images.ibink.com/images/photoFan2_04.gif" width="16" height="137" alt=""/></td> <td><a href="http://images.ibink.com/thumbs/800x600/21646.jpg"><img src="http://images.ibink.com/thumbs/200x200/21646.jpg" width="204" height="137" alt=""/></a></td> <td><img src="http://images.ibink.com/images/photoFan2_06.gif" width="11" height="137" alt=""/></td> </tr> <tr> <td><img src="http://images.ibink.com/images/photoFan2_07.gif" width="16" height="10" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_08.gif" width="204" height="10" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_09.gif" width="11" height="10" alt=""/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet> ------------------------------- BROKEN.xml -------------------------------------- <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="BROKEN-xslt.xml" type="text/xsl"?> <rootNode/> ------------------------------- xhtml.xml --------------------------------------- <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>External CSS Stylesheet Bug</title> <!-- External stylesheet works fine in XHTML code --> <link rel="stylesheet" type="text/css" href="xhtml.css"/> </head> <body> <table cellspacing="0"> <tr> <td><img src="http://images.ibink.com/images/photoFan2_01.gif" width="16" height="20" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_02.gif" width="204" height="20" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_03.gif" width="11" height="20" alt=""/></td> </tr> <tr> <td><img src="http://images.ibink.com/images/photoFan2_04.gif" width="16" height="137" alt=""/></td> <td valign="bottom"><a href="http://images.ibink.com/thumbs/800x600/21646.jpg"><img src="http://images.ibink.com/thumbs/200x200/21646.jpg" width="204" height="137" alt=""/></a></td> <td><img src="http://images.ibink.com/images/photoFan2_06.gif" width="11" height="137" alt=""/></td> </tr> <tr> <td><img src="http://images.ibink.com/images/photoFan2_07.gif" width="16" height="10" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_08.gif" width="204" height="10" alt=""/></td> <td><img src="http://images.ibink.com/images/photoFan2_09.gif" width="11" height="10" alt=""/></td> </tr> </table> <p><a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p> </body> </html>
Attached file xhtml.css —
Attached file BROKEN-xslt.xml (obsolete) —
Attached file BROKEN.xml (obsolete) —
Uploaded BROKEN.xml modified to pull the xslt and css files from the related attachments to this bug report.
Attached file xhtml.xml —
The XHTML version of this code which works correctly using an external CSS stylesheet. This file validates as '/DTD/xhtml1-strict.dtd'.
Attached file WORKING-xslt.xml (obsolete) —
Working version of the XSLT stylesheet which embeds the CSS inline using CDATA. To view the result, click on the WORKING.xml file which I will upload shortly...
Attached file WORKING.xml (obsolete) —
This bug is not XSLT, but layout. When the link is added dynamically to the head, only the vertical space is cut away. Not sure, computed style does show that the width of the td is bigger than the img, but both border and padding are 0px, so I'm kinda clueless where this comes from. Note that the example is HTML, not XHTML, so XHTML is not an issue here. (I have an equivalent XHTML testcase, it's really the same thing)
Attachment #88406 - Attachment is obsolete: true
Attachment #88407 - Attachment is obsolete: true
Attachment #88410 - Attachment is obsolete: true
Attachment #88411 - Attachment is obsolete: true
over to layout. <link rel="stylesheet" type="text/css" href="foo"> works when part of the document on load, but not when added via js, or XSLT.
Assignee: peterv → attinasi
Component: XSLT → Layout
OS: Windows XP → All
QA Contact: keith → petersen
Hardware: PC → All
Summary: External CSS stylesheet causes gaps between table columns in XSLT output → Adding CSS stylesheet dynamically causes gaps between table columns
bug 145522 might be just the same thing
Whiteboard: XSLT DHTML
I thought peterv made dynamically added links work. Anyway, ->Style System.
to reiterate this. The stylesheet is applied. It's just that the layout is different when adding the stylesheet dynamically vs. having the link element in the parsed source. Adding the stylesheet link does change the layout of the table, but it does not result in the correct layout. Instead it leaves some vertical gaps, which are colored red (by the then applied stylesheet :-)).
Ah, so it's a ReResolve bug (since we're not blocking the parser for the stylesheet load). It might go away if we fix stylesheet loading not to block the parser and instead delay frame construction, but there would still be the underlying ReResolve bug to fix.
Summary: Adding CSS stylesheet dynamically causes gaps between table columns → [RR]Adding CSS stylesheet dynamically causes gaps between table columns
Actually, it looks like it might be a table incremental reflow bug. The styles that seem to matter are the image border style and the td padding style. The others all apply correctly dynamically.
Summary: [RR]Adding CSS stylesheet dynamically causes gaps between table columns → {inc}[RR]Adding CSS stylesheet dynamically causes gaps between table columns
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
Target Milestone: --- → Future
Reassigning to other@layout.bugs until someone is willing to take that
Assignee: attinasi → other
Target Milestone: Future → ---
I've just come across the same type of problem.
Consider the following URL which uses xslt and its rendering in mozilla, though note that none of the links in the page are functional (its only to look at): http://www.aaa.net.au/campbell/pa/pa.xml Here's the same code as an html document (its conformant xhtml 1.1 that passes the tests at http://validator.w3.org/): http://www.aaa.net.au/campbell/pa/pa.html IE6 renders http://www.aaa.net.au/campbell/pa/pa.xml perfectly. The mozilla rendition seems to be even lacking many images entirely.
no David, you did not. xhtml is case sensitive (the CSS has uppercase names), it doesn't have body fixup rule. But neither IE (for both the xml and the html) nor Mozilla (for the html) treat your file as xhtml, as you send it with text/html mime type. The XSLT generated content in Mozilla is, though, and therefor you see all the issues you'd see in Mozilla and IE, if you served the result as text/xml.
you are also not outputting everything as xhtml, some of it is plain xml. Only the descendants of the element with the xmlns="http://www.w3.org/1999/xhtml" attribute will be xhtml. The elements in the other templates doesn't have a namespace and will therefor be plain xml. Move the xmlns-attribute to the xsl:stylesheet element, that way all elements will get the right namespace. This is all by design and according to spec
Target Milestone: --- → Future
.
Assignee: other → table
Component: Layout → Layout: Tables
Priority: P3 → --
QA Contact: cpetersen0953 → madhur
Target Milestone: Future → ---
Priority: -- → P3
Target Milestone: --- → Future
HTML testcase WFM Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a2pre) Gecko/20061222 Minefield/3.0a2pre
(In reply to comment #20) > HTML testcase WFM > Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a2pre) Gecko/20061222 > Minefield/3.0a2pre > Seems to WFM here too. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a2pre) Gecko/20061226 Minefield/3.0a2pre - Build ID: 2006122604
Probably fixed by the reflow branch. Could anyone test?
Worksforme in a pre-reflow-branch build too.
Status: NEW → RESOLVED
Closed: 18 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: