New Member - Hi! Issue with CSS rendering for Macintosh regarding TEI

Hello. My name is Ariel Segal. I am trying to refresh my XML/CSS skills and I have a question about the rendering of a Text Encoding Initiative document. The document renders perfectly on PCs, and there is no problem with the encoding of the document itself.

However, the borders do not show up and the 2 background colors do not properly show up (only on part of the document) on all Mac browsers I have tried (Safari, Firefox, Chrome, even the ancient Internet Explorer for Mac). Could someone please inform me as to what might be adjusted in the style sheet to make it render the document properly for macs? Thank you so much

Here is the stylesheet:


author { DISPLAY:block;FONT-STYLE:italic; }
body { BACKGROUND:#CCFFCC;
WIDTH:200px;
BORDER-STYLE:solid;
BORDER-WIDTH:1px;
PADDING:5px; }
encodingDesc, sourceDesc, respStmt, publicationStmt, availability { DISPLAY:block;MARGIN-TOP:1em; }
head { DISPLAY:block;FONT-FAMILY:arial;MARGIN-BOTTOM:1em;FONT-WEIGHT:bold; }
l { DISPLAY:block; }
lg { DISPLAY:block;MARGIN-BOTTOM:1em; }
addrline, publicationStmt publisher, publicationStmt date { DISPLAY:block; }
sourceDesc title { FONT-STYLE:italic; }
teiHeader { BACKGROUND:#FFFFCC;
WIDTH:640px;
BORDER-STYLE:solid;
BORDER-WIDTH:1px;
BORDER-BOTTOM-WIDTH:0px;
PADDING:5px;
FONT-SIZE:75%;
FONT-FAMILY:verdana; }
titleStmt title { DISPLAY:block;FONT-WEIGHT:bold; }


And here is the TEI document:


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TEI.2 SYSTEM "../dtd/teixlite.dtd">
<?xml-stylesheet href="../styles/yeats.css" type="text/css"?>
<TEI.2 id="Yeats_Old">
<teiHeader>
<fileDesc>
<titleStmt>
<title>When You Are Old</title>
<author>W.B. Yeats</author>
<respStmt>
<resp>Creation of machine-readable text by <name>Susan Schreibman</name>
</resp>
<resp>Header creation by <name>Ariel Segal</name>
</resp>
<resp>Encoded by <name>Ariel Segal</name>
</resp>
</respStmt>
</titleStmt>
<publicationStmt>
<publisher>Online Text Archive</publisher>
<pubPlace>
<address>
<addrLine>Online University</addrLine>
<addrLine>Palo Alto, CA</addrLine>
</address>
</pubPlace>
<date>December 10, 2013</date>
<availability>
<p>This text is freely available provided the text is distributed with the header information provided.</p>
</availability>
</publicationStmt>
<sourceDesc>
<bibl>
<title>The Collected Works of W.B. Yeats, Volume I: The Poems</title>. Edited by <editor>Richard J. Finneran</editor>. <publisher>Macmillan</publisher>: <pubPlace>New York</pubPlace>, <date>1989</date>.
</bibl>
</sourceDesc>
</fileDesc>
</teiHeader>
<text>
<body>

<head>When You Are Old</head>
<lg n="1">
<l n="1">When you are old and grey and full of sleep</l>
<l n="2">And nodding by the fire, take down this book,</l>
<l n="3">And slowly read, and dream of the soft look</l>
<l n="4">Your eyes had once, and of their shadows deep</l>
</lg>
<lg n="2">
<l n="5">How many loved your moments of glad grace,</l>
<l n="6">And loved your beauty with love false or true;</l>
<l n="7">But one man loved the pilgrim soul in you,</l>
<l n="8">And loved the sorrows of your changing face.</l>
</lg>

<lg n="3"><l n="9">And bending down beside the glowing bars,</l>
<l n="10">Murmur, a little sadly, how love fled</l>
<l n="11">And paced upon the mountains overhead,</l>
<l n="12">And hid his face amid a crowd of stars.</l>
</lg>
<note type="footnote">Note: According to A. Norman Jeffares' "A Commentary on the Collected Poems of W.B. Yeats," this poem was written on October 21, 1891, and first appeared in "The Countess Kathleen and Various Legends and Lyrics" (1892). It is founded upon but is not a translation of Ronsard's "Quand Vous Serez Bien Vielle" from Sonnets pour HÈlËne, II (1578).</note>

</body>
</text>
</TEI.2>

Hi, Welcome to Sitepoint.:slight_smile:

You can gather from the lack of replies that probably no one here has heard of TEI as we deal with normal html and CSS.

You probably should be using XSLT to transform your xml into html suitable for a browser and then you can style it quite easily.

There are some links here that may help.

http://dcl.slis.indiana.edu/teibp/
http://www.menota.org/HB1-0_ch1_introduction.xhtml

You shouldn’t really output xml into a browser like that as they will not know about the tags you have made up and browsers like IE8 and under will not apply styles to elements they don’t know anyway (see html5 shiv for example).

I suspect that you really should be transforming that xml using XLST and producing normal html for web browsers consumption.

Of course I’ve never heard of TEI anyway and never get involved with xml either.:slight_smile:

Thanks for the info, Paul! I subscribed to a TEI listserv and they offered me some tips that I will try out. Just trying to refresh my skills a bit.
Best, Ariel

Hi all! Someone on a TEI listserv helped me. The advice they gave was

You need an explicit display: block on both
teiHeader and body; without those properties, the teiHeader and the body
can’t be sized and background-colored.

Here’s the revised CSS:

teiHeader {
display: block;
background-color:#FFFFCC;
width:640px;
border-style:solid;
border-width:1px;
border-bottom-width:0px;
padding:5px;
font-size:75%;
font-family:verdana; }
addrline, publicationStmt publisher, publicationStmt date { display:block; }
sourceDesc title { font-style:italic; }
titleStmt title { display:block;font-weight:bold; }
author { display:block;font-style:italic; }
encodingDesc, sourceDesc, respStmt, publicationStmt, availability {
display:block;margin-top:1em; }
body {
display: block;
background-color:#CCFFCC;
width:200px;
border-style:solid;
border-width:1px;
padding:5px; }
head { display:block;font-family:arial;margin-bottom:1em;font-weight:bold; }
l { display:block; }
lg { display:block;margin-bottom:1em; }

Best, Ariel Segal

Hi asegal,
Aha, I did never hear about TEI either. :slight_smile:
But I found the [U]TEI Wiki[/U], and happily there was a link to the [URL=“http://www.tei-c.org/Vault/P4/Lite/DTD/teixlite.dtd”][U]TEI dtd[/U] (doctype definition) you used, so I could download it in order to reconstruct what is going on.

It doesn’t render good in the browsers under Windows either.

Then I did some adaption (it appears all TEI-tags need to get a {display:block} before they are working).

  • Test 2: [U]tei-nw.xml[/U]
    This is the same page with the adapted stylesheet ([U]yeats-nw.css[/U])

  • It is performing good in all Windows browsers: Firefox, Chrome, Opera, Safari, and Internet Explorer 5.5 t/m 11 (!). Only Internet Explorer 8 and before don’t center the whole page, but show it on the left side of the browser window; IE9+ show it centered, as the other browsers.
  • Also Safari and Firefox on Mac are fine.
  • Some screenshots you can see [U]here on Browsershots[/U].
    Note: IE5, 6, 7 and 8 don’t give a result in browsershots, but I tested IE7 under Windows myself, and it’s fine. According to Netrender.com also IE 6, 7 and 8 are ok.
Edit:

Ai, I see a crosspost while I’m posting this one! Was reading and testing in the meantime. :slight_smile:
And the same solution.
Anyway, now I know what TEI is. :wink:

@Paul O’B: (“browsers like IE8 and under will not apply styles to elements they don’t know anyway”)
In general that is true for (x)html files, but it appears not for well formed xml files (served with a proper DTD as xml, not as text/html).
That’s what I learned today. :wink:

Good work again Francky I didn’t think to try the page with an xml extension :blush.

Then I did some adaption (it appears all TEI-tags need to get a {display:block} before they are working).

Yes I should have mentioned that :slight_smile:

All html tags are displayed inline by default (even the ones that are made up) and its the UA that styles them as block etc which is why html5 needs all the new (block) elements set to display:block before they work properly as it treats them as inline (modern browsers have included the new elements in their UA stylesheets now so its only older browsers that need them. Any new elements would still need to be set as display:block line the new html5 ‘main’ element).

Only Internet Explorer 8 and before don’t center the whole page, but show it on the left side of the browser window; IE9+ show it centered, as the other browsers.

IE8 (and under) is rendering it in quirks mode and in quirks mode it doesn’t understand margin:auto or any recent css (just try the child selector">" to test this out and you will see it doesn’t work).

You can fix the centering with the old ie5 hacks like so:


#Yeats_Old,text{text-align:center;display:block}
body,teiHeader{text-align:left;display:block}

Of course the layout is still using the broken box model in IE8 and under so padding, margins and borders will be inside the specified dimensions and not additive.

@Paul O’B: (“browsers like IE8 and under will not apply styles to elements they don’t know anyway”)
In general that is true for (x)html files, but it appears not for well formed xml files (served with a proper DTD as xml, not as text/html).
That’s what I learned today. :wink:

I just assumed that IE would not render styles for elements it does not know as that what happens in html5 but I never tested with an xml extension so you learn something new every day :slight_smile:

However, I would still suggest that xml is only used as a transport mechanism and not for actual rendering on a webpage.

As the years go on, I’m gradually forgetting my dusty toolbox of IE5 hacks. :smiley:

=======

Sure, though maybe Ariel Segal has 2533 TEI-files in a TEI generated documentary database system, then this is easier than recoding them. :slight_smile:

Point taken :slight_smile: