User blog:LadyKatFrog/Lists, Photos, and Spacing, oh, my!

Working on the wiki, I notice that both ordered and unordered list run into a problem around photos. Sometimes, the numbers or bullets disappear. Sometimes, the numbers or bullets overlay the photo, or come extremely close to overlaying the photo. Either way, the default way for adding a photo near a list doesn't quite work.

To fix this problem, you need to:
 * 1) Edit the page.
 * 2) Click on the 'Source' tab.
 * 3) Find the photo. The basic code for an inserted photo is   filename
 * 4) Move the photo code outside any list.
 * 5) Now comes the tricking part, as we need to get rid of the wikitext and instead use HTML for our lists.  Begin your list next to the photo using  for an ordered list and  for an unordered list.
 * 6) Put  and  around all the list items.
 * 7) Add  or  to the end of the list.
 * 8) At this point, your photo will appear exactly next to your list with no white space.
 * 9) Go to your start of list tag (  or  ).  Add the HTML global element 'style' to set the left margin. For example, if you have a small graphic, try .
 * 10) Work with the left margin (the '200px' in the above example) until the page looks right.
 * 11) Congratulations!  You just fixed your page.

Example: Before

 * 1) Base-Cactus.png is an ordered list.
 * 2) It has four list items.
 * 3) The items are coded with  and  in HTML.
 * 4) But not in wikitext.

Example: After
Here is an ordered list. It has four list items. The items are coded with  and </li> in HTML.</li> But not in wikitext.</li></ol>