Hi there,
I'm trying to use a CSS stylesheet to format an XML document, which will be used simultaneously to display content on a webpage and as an RSS feed. So far everything is working fine except that I need to make some of the XML become invisible when displayed in a browser. I don't want the website to display some of the RSS <channel> info (<description>), <copyright>, etc.).
Here is the link to the XML doc:
<!-- m --><a class="postlink" href="http://www25.brinkster.com/oo7girl/vimy/data/test.xml">http://www25.brinkster.com/oo7girl/vimy/data/test.xml</a><!-- m -->
I can't put <div style="display:none"> in the XML document itself, because then the RSS feed doesn't validate properly. Therefore, I need to try to invoke display:none via my external stylesheet. This should work fine, but for some reason the XML doc is not recognizing that some elements should not be displayed, as specified in the stylesheet. Below is my stylesheet. I was hoping someone could tell me what I might be doing wrong. I have a feeling it's a question of inheritance/order within the stylesheet. :S
channel
{
display:block;
height:300px;
width:280px;
border:1px solid #999966;
overflow:auto;
background-color:#cccc99;
font: 12px arial;
}
channel>link, channel>copyright, channel>image, channel>url
{
display: none;
}
item
{
display: block;
padding:20px;
margin-bottom:10px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
title
{
display: block;
margin-bottom:10px;
border-bottom:1px solid #999966;
background-color:#ffffff;
font-weight:bold;
}
link
{
display: block;
padding:20px;
margin-bottom:10px;
}
channel>title
{
display: block;
margin-bottom:10px;
margin-top:10px;
padding:20px;
border-bottom:1px solid #999966;
background-color:#999966;
font-weight:bold;
}
channel>description
{
font-size:10px;
margin-bottom:10px;
margin-left:20px;
display: block;
padding:20px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
channel>title
{
display: block;
margin-bottom:10px;
border-bottom:1px solid #999966;
background-color:#ffffff;
font-weight:bold;
}
channel>copyright
{
font-size:10px;
margin-bottom:10px;
margin-left:20px;
display: block;
padding:20px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
item>title
{
font-weight:bold;
}Try
channel link rather than channel>link as those selectors play up sometimes in IE.Just get rid of the ">"?
Will the browser know that I only want to make the <link> elements WITHIN <channel> invisible?Yes
I'm trying to use a CSS stylesheet to format an XML document, which will be used simultaneously to display content on a webpage and as an RSS feed. So far everything is working fine except that I need to make some of the XML become invisible when displayed in a browser. I don't want the website to display some of the RSS <channel> info (<description>), <copyright>, etc.).
Here is the link to the XML doc:
<!-- m --><a class="postlink" href="http://www25.brinkster.com/oo7girl/vimy/data/test.xml">http://www25.brinkster.com/oo7girl/vimy/data/test.xml</a><!-- m -->
I can't put <div style="display:none"> in the XML document itself, because then the RSS feed doesn't validate properly. Therefore, I need to try to invoke display:none via my external stylesheet. This should work fine, but for some reason the XML doc is not recognizing that some elements should not be displayed, as specified in the stylesheet. Below is my stylesheet. I was hoping someone could tell me what I might be doing wrong. I have a feeling it's a question of inheritance/order within the stylesheet. :S
channel
{
display:block;
height:300px;
width:280px;
border:1px solid #999966;
overflow:auto;
background-color:#cccc99;
font: 12px arial;
}
channel>link, channel>copyright, channel>image, channel>url
{
display: none;
}
item
{
display: block;
padding:20px;
margin-bottom:10px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
title
{
display: block;
margin-bottom:10px;
border-bottom:1px solid #999966;
background-color:#ffffff;
font-weight:bold;
}
link
{
display: block;
padding:20px;
margin-bottom:10px;
}
channel>title
{
display: block;
margin-bottom:10px;
margin-top:10px;
padding:20px;
border-bottom:1px solid #999966;
background-color:#999966;
font-weight:bold;
}
channel>description
{
font-size:10px;
margin-bottom:10px;
margin-left:20px;
display: block;
padding:20px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
channel>title
{
display: block;
margin-bottom:10px;
border-bottom:1px solid #999966;
background-color:#ffffff;
font-weight:bold;
}
channel>copyright
{
font-size:10px;
margin-bottom:10px;
margin-left:20px;
display: block;
padding:20px;
border-top:1px solid #999966;
border-bottom:1px solid #999966;
background-color:#ffffff;
}
item>title
{
font-weight:bold;
}Try
channel link rather than channel>link as those selectors play up sometimes in IE.Just get rid of the ">"?
Will the browser know that I only want to make the <link> elements WITHIN <channel> invisible?Yes