User:SMcCandlish/Sandbox/Styling ordered and unordered list markers
Some test cases for styling list appearance. Some results are not necessarily as expected, because the site-wide stylesheet is using a list-style-image
for unordered lists, and this overrides list-style-type
. While list-style
will override that, this is not always desirable; in such cases, one will want to use list-style-image: none;
then a list-style-type
.
Unordered list test cases
UL
-only
<ul style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
FAIL
LI
only:
<ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
FAIL
Both (redundant):
<ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
FAIL
UL
, using list-style: none
instead:
<ul style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI, using list-style: none
instead:
<ul> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ul>
- Foo
- Bar
OK
Both (redundant), using list-style-type: square
:
<ul style="list-style-type: square;"> <li style="list-style-type: square;">Foo</li> <li style="list-style-type: square;">Bar</li> </ul>
- Foo
- Bar
FAIL
This means neither alone will work either.
UL
, using list-style: square
instead:
<ul style="list-style: square;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI
, using list-style: square
instead:
<ul> <li style="list-style: square;">Foo</li> <li style="list-style: square;">Bar</li> </ul>
- Foo
- Bar
OK
Both (redundant), clearing with list-style-image: none
first:
<ul style="list-style-image: none; list-style-type: none;"> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
OK
This means list-style-type: square
will also work here, but we need to see if these work non-redundantly.
UL
, clearing with list-style-image: none
first:
<ul style="list-style-image: none; list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
OK
LI
, clearing with list-style-image: none
first:
<ul> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul>
- Foo
- Bar
OK
Default (HTML)
<ul> <li>Foo</li> <li>Bar</li> </ul>
- Foo
- Bar
Default (Wikimarkup *
):
*Foo *Bar
- Foo
- Bar
Both specific and general code work fine with ordered lists
These are not using an image in the default stylesheet, so there is nothing to override.
ALL of these work.
OL
-only
<ol style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
LI
only:
<ol> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>
- Foo
- Bar
Both (redundant):
<ol style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>
- Foo
- Bar
OL
, using list-style
instead:
<ol style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
LI
, using list-style
instead:
<ol> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>
- Foo
- Bar
Both (redundant):
<ol style="list-style: none;"> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>
- Foo
- Bar
Default (HTML)
<ol> <li>Foo</li> <li>Bar</li> </ol>
- Foo
- Bar
Default (Wikimarkup #
):
#Foo #Bar
- Foo
- Bar