Menu
Let's have a look at some comments 1) on a page generated by Wordpress (it's not a site I maintain, I'm just wondering what's going on here). As these pages might disappear in the near future, I've put some screenshots online. Here's what I saw:
Obviously, the list-item markers shouldn't be there. So I decided to look at the source using Firebug. As you can see, Firebug claims that the list-style property (containing none) is inherited from ol.commentlist. But if that's the case, why are the circle and the square visible? When checking the computed style, Firebug shows the list-style-types correctly.
What's the correct behaviour? I just did a quick check in Chromium, whose Web Inspector gave a better view of reality (the list item markers were also displayed in this browser):
According to WebKit, list-style of ol.commentlist isn't inherited, only the default value of list-style-type from the rendering engine.
So, we may conclude that the output of both browsers is correct and that Firefox (Firebug) shows an incorrect representation of inherited styles. What does the CSS specification say?
Inheritance will transfer the
list-stylevalues fromOLandULelements toLIelements. This is the recommended way to specify list style information.
Not much about the inheritance of ol properties to uls. Is Firebug wrong in this respect or should nested uls inherit (some) properties from ols (and if so, why aren't the elements rendered accordingly in two totally different browsers)? To be clear, my actual question is: which properties should nested ul elements inherit from ol elements that enclose them?
EDIT: I forgot about Opera and the picture becomes even more clear when looking at that browser's inspector:
As the right pane suggests, nested ul elements do inherit properties from ol elements, but the browser's default values of list-style-type and list-style-position override those specified by its parent.
As Vinhboy supports my suspicion of this being a bug somewhere (Firefox? Firebug?), I filed a bug report.
BTW, I managed to let the markers disappear by just changing line 312 of style.css to
ol.commentlist, li.commentlist, ul.children {
When also explicitly defining the list-style of ul.children to none, the markers are not painted. You can have a look at screenshots of Firebug and WebKit's Web Inspector in this case, if you like.
1) After contacting the developer of the page he fixed the unwanted list markers, so you can't see this issue anymore (without editing the CSS on the fly). You can still look at the screenshots to see what this is all about, but I also made a test case and added that to my bug report. For everyone's convenience, the HTML/CSS source reads:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><ol>/<ul> inheritance test case</title>
<style>
ol {
list-style: none;
}
</style>
</head>
<body>
<!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 -->
<ol>
<li>First item</li>
<li>Second one</li>
<li>Now let's have some fun with a nested <ul>:
<ul>
<li>First item</li>
<li>And the second one again (this is incredibly boring, but it's just an example)</li>
<li>Ho hum</li>
<li>Are you still there?</li>
</ul>
</li>
<li>Just another item</li>
</ol>
</body>
</html>
Just select the ul and notice that Firebug says that it inherited the list-style property
from the ol (though it didn't, when we look at the actually rendered page).
Please compare this with WebKit's web inspector and especially with the Opera
variant. The latter explicitly makes clear that it falls back to the browser's
default values of list-style-type and list-style-position.
231
Actually, your assumption of the styling inheritance is a bit off. The inheritance would be from li.commentlist rather than ol.commentlist. The reason for the discrepancy is that Firefox accepts list-type styling to the list items as well as the list wrappers. To disable the bullets completely on the unordered list you must set the list-type for the UL tag. That is the reason why I always remove the list-type from the list wrapper and apply it to the list items.
This is just one of those rendering differences between browsers that we all have to learn and adjust. Another example of this inconsistency is the use of margin and padding on the BODY tag. To keep rendering consistent in all browsers you remove should the margin and then set the padding.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
