Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements.
The structure of my XML file is as follows:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
one or more clauses
</clause>
</turn>
</transcription>
This is a snippet of my CSS code:
.turn {
counter-reset: item;
}
.turn .clause {
display:list-item;
}
.clause {
content: counter(item);
counter-increment: item;
}
I am following this resource: , and working with a similar document located at . However, there seems to be an issue as the display1.xml does not function correctly when viewed in Firefox. It works perfectly fine in other browsers like IE, Safari, and Chrome.
If anyone has any solutions or suggestions on how to make it work seamlessly in Firefox as well as other browsers, please share!