Wikipedia

User:SMcCandlish/Sandbox/Styling ordered and unordered list markers

< User:SMcCandlish‎ | Sandbox

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

edit

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

edit

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>
  1. Foo
  2. Bar


LI only: 

 <ol>
 <li style="list-style-type: none;">Foo</li>
 <li style="list-style-type: none;">Bar</li>
 </ol>
  1. Foo
  2. 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>
  1. Foo
  2. Bar


OL, using list-style instead: 

 <ol style="list-style: none;">
 <li>Foo</li>
 <li>Bar</li>
 </ol>
  1. Foo
  2. Bar


LI, using list-style instead: 

 <ol>
 <li style="list-style: none;">Foo</li>
 <li style="list-style: none;">Bar</li>
 </ol>
  1. Foo
  2. Bar


Both (redundant): 

 <ol style="list-style: none;">
 <li style="list-style: none;">Foo</li>
 <li style="list-style: none;">Bar</li>
 </ol>
  1. Foo
  2. Bar


Default (HTML) 

 <ol>
 <li>Foo</li>
 <li>Bar</li>
 </ol>
  1. Foo
  2. Bar


Default (Wikimarkup #): 

#Foo
#Bar
  1. Foo
  2. Bar
Retrieved from "https://en.wikipedia.org/w/index.php?title=User:SMcCandlish/Sandbox/Styling_ordered_and_unordered_list_markers&oldid=737923600"