CSS: mystery margin on XInclude'd content
Posted: Wed Jun 26, 2013 4:16 am
I need to use XInclude fairly extensively and want the rendering of our documents in Author mode to be fairly seamless. By that, I mean I would like only subtle visual cues that a referenced document is being displayed. I've nearly accomplished this with the code below, except that there's a really strange layout issue. Whenever the "lidLabel" element is not "display:block" (or list-item), the elements that follow have a fairly substantial margin added to them, and I have not found how to eliminate it.
I'm including all the code to demonstrate the issue (all are saved in the same directory)...
The schema (cookieJar.xsd):
The style (cookieStyle.css):
The referenced XML (cookieJar.xml):
The referencing XML (cookieShelf.xml):
I played with all different combinations of "block" and "inline" values for the "display" CSS attribute and I found that all block-styled elements that follow an inline-styled element, within an XInclude/referenced document, will have the mystery margin added to them. For instance, if the "lidLabel" is block, "cookie" is inline, and "bottomNote" is block, then "bottomNote" will have the mystery margin added. As the code is above, the inline of "lidLabel" seems to cause both of the other elements (with block layout) to have the mystery margin. One more thing, if the "lidLabel" element is absent, then the mystery margin is not present for any "cookie." Finally, no mystery margins ever appear in the current (referencing) document.
So, how do I avoid the mystery margin?
I am curious to reference a document from another document to see if the margin compounds more. I may test that with a more complex schema and report back if that produces any interesting results. If there's a good place to deposit a screen capture or even a ZIP of the files for convenience, let me know.
Thanks.
I'm including all the code to demonstrate the issue (all are saved in the same directory)...
The schema (cookieJar.xsd):
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:example="http://myExample.com" elementFormDefault="qualified" targetNamespace="http://myExample.com">
<complexType name="CookieJar">
<sequence>
<element name="lidLabel" type="string" minOccurs="0" maxOccurs="unbounded"/>
<element name="cookie" type="string" maxOccurs="unbounded"/>
<element name="bottomNote" type="string" minOccurs="0" maxOccurs="unbounded"/>
</sequence>
</complexType>
<complexType name="Shelf">
<choice maxOccurs="unbounded">
<element name="cookieJar" type="example:CookieJar"/>
</choice>
</complexType>
<element name="shelf" type="example:Shelf"/>
<element name="cookieJar" type="example:CookieJar"/>
</schema>
Code: Select all
@namespace oxy url('http://www.oxygenxml.com/extensions/author');
@namespace xi url('http://www.w3.org/2001/XInclude');
@namespace url('http://myExample.com');
* {
padding: 0px;
margin: 5px;
background-color: white; }
oxy|document {
background-color: rgb(223,223,223); }
oxy|reference:before {
content:"" !important; /* remove the reference/transclusion icon */ }
oxy|reference {
border: 1px dashed gray !important;
background-color: rgba(0,255,0,0.2) !important; }
xi|include:before {
content:"" !important; /* remove the link icon and URL display */ }
xi|include {
padding: 0px !important;
margin: 0px !important; }
shelf {
display: block;
border: 1px solid black; }
cookieJar:before {
content: "-Jar-"; }
cookieJar {
display: block;
border-top: 1px solid black; }
lidLabel {
/*display: block; /* enabling this removes the mystery spacing */ }
cookie:before {
content: "Cookie: "; }
cookie {
display: list-item;
-oxy-show-placeholder: always;
-oxy-placeholder-content: "type here";
border: 1px solid black; }
bottomNote {
display: block; }
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cookieStyle.css"?>
<cookieJar xmlns="http://myExample.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://myExample.com cookieJars.xsd">
<lidLabel>Included Cookies</lidLabel>
<cookie>Chocolate Chip</cookie>
<cookie>Snicker Doodle</cookie>
<cookie>Oatmeal Raisin</cookie>
<bottomNote>You ate the last cookie!</bottomNote>
<bottomNote>This is the second notice.</bottomNote>
</cookieJar>
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cookieStyle.css"?>
<shelf xmlns="http://myExample.com" xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://myExample.com cookieJars.xsd">
<cookieJar>
<lidLabel>Andre's Cookies</lidLabel>
<cookie>Peanut Butter</cookie>
<cookie>Black and White</cookie>
<bottomNote>Go to the store and buy some more!</bottomNote>
</cookieJar>
<cookieJar>
<lidLabel>Dustin's Cookies</lidLabel>
<cookie>Samoa</cookie>
<cookie>Thin Mint</cookie>
</cookieJar>
<xi:include href="cookieJar.xml"/>
<cookieJar>
<lidLabel>Patrick's Cookies</lidLabel>
<cookie>Macaroon</cookie>
<cookie>Thumbprint</cookie>
</cookieJar>
</shelf>
So, how do I avoid the mystery margin?
I am curious to reference a document from another document to see if the margin compounds more. I may test that with a more complex schema and report back if that produces any interesting results. If there's a good place to deposit a screen capture or even a ZIP of the files for convenience, let me know.
Thanks.