The new CSS used in Slashdot breaks the rendering of
lists in comments. Instead of being rendered with
bullets, the unordered lists (ul) inserted by the
submitter in the body of a comment are rendered as if
they were used for nesting comments: the first item
gets a gray arrow and the others get no decoration.
The ordered lists (ol) are still numbered correctly
but their indentation is wrong. See for example how
this comment is rendered:
http://linux.slashdot.org/comments.pl?sid=187740&cid=15487385
For unordered lists (ul), the main culprit is probably
the following rule from comments.css:
div#contents ul li ul {
padding-left: 1.55em;
margin: 0 0 .75em 0;
list-style: none;
background:
url(//images.slashdot.org/comment-line.png) no-repeat
3px -1px;
}
These properties are inherited by the ul and li
elements deeper in the hierarchy, including those in
the body of the comments. Due to the shaky support
for the ">" selector in some browsers (like IE), the
easiest way to fix this problem may be to override the
rule for ul inside div.commentBody.
There is already a rule like this:
div.commentBody blockquote { ... }
It should be followed by another rule like this:
div.commentBody ul {
margin: // some reasonable defaults
padding: // some reasonable defaults
list-style: // something like disc or whatever
background: transparent
}
Also, resetting the margins and padding for li in a
similar way should fix the negative indent of the list
items inside the numbered lists (ol).
Logged In: YES
user_id=8913
I see that similar problems have already been reported:
- Bug #1501997 Slashdot's new CSS rules are too generic
- Bug #1501136 OL indent is wrong in meta mod page (New CSS)
I assume all these bugs could be fixed with the solution
proposed here (which is similar to what was proposed in
bug #1501997).