WordPress.org

1. jackdaniel
   Member
   Posted 10 months ago #

   I've been trying to get a bulleted/unordered list embeded within an ordered list. I'm pretty sure the HTML is correct, but it is not displaying correctly. Can someone take a look?

   Here's the site:
   http://www.waterwhip.com/tips-and-tricks/buying-a-boat/

   Here's the code:

   [Code moderated as per the Forum Rules. Please use the pastebin]

   Thanks!

2. jackdaniel
   Member
   Posted 10 months ago #

   bump

3. Richard Coan
   Member
   Posted 10 months ago #

   Your unordered list is inheriting the ordered list "list-style:decimal" style.

4. Richard Coan
   Member
   Posted 10 months ago #

   For CSS issues you should really use a in-browser code inspector, Chrome has one built in in the context menu by right clicking on the element and choosing inspect element. Firefox has several, ive used both Firebug (my favorite with CSS) and Web Developer (my favorite with JavaScript). Note that both of these plugins on Firefox WILL slow your browser down.

5. alchymyth
   The Sweeper
   Posted 10 months ago #

   the list-style-types are wrongly styled on the li elements;
   

   .post ul li, .single-main ul li{list-style-image:none; list-style-position:outside; list-style-type:disc; padding:3px 0}
   .post ol li, .single-main ol li{list-style-image:none; list-style-position:outside; list-style-type:decimal; padding:3px 0}

   rearranging the styles in this way should work:
   

   .post ul { list-style-type:disc; list-style-image:none; list-style-position:outside; }
   .post ol { list-style-type:decimal; list-style-image:none; list-style-position:outside; }
   .post ul li, .single-main ul li{  padding:3px 0; }
   .post ol li, .single-main ol li{  padding:3px 0; }

   http://www.w3schools.com/Css/css_list.asp

Reply

You must log in to post.