Lists

Your site is great and offers a lot of help. I am new to CSS and need advice on lists. I used your tutorial but can not get the list to work properly.
My CSS code is:

ul.disc {list-style-type: disc};
and my html code is:
<ul style="margin-left: 0; padding-left: 30px;">

<li>Breakfast Meeting last Saturday of month.</li>
<li>Skeet Shoots</li>
<li>Banquets</li>
<li>Retreats</li>
<li>Bible Conferences</li>
<li>Wheel Chair Ramp Construction</li>
<li>Prison Ministry</li>
<li>Ed Rolley Men's Mentoring Foundation</li>
<li>A.W.I.N.</li>
</ul>
This is what I get:
Breakfast Meeting last Saturday of month. Skeet Shoots Banquets Retreats Bible Conferences Wheel Chair Ramp Construction Prison Ministry Ed Rolley Men's Mentoring Foundation A.W.I.N.

Thanks for any advice,
Buddy

Hi Buddy,

That list works OK for me. My guess is that your page is also including an external style sheet, or has some other styles defined in the page, that are setting the li elements to "display: inline". If you copy and paste your above markup into a blank HTML document you should find that the list displays correctly.

Does that help?

Matt
ELATED : )

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt, I am using an external style sheet.

I thought that some of the other code could affect this list.

Yeah, just look for something along the lines of:

li { ... display: inline; ... }

If you can't modify the linked style sheet for some reason then you can counter the effect of the above style in your own page using something like:

<style>
ul.disc {list-style-type: disc; }
ul.disc li { display: block; }
</style>

...


<ul class="disc" style="margin-left: 0; padding-left: 30px;">
<li> ...

This will revert the display mode of the li elements within your ul list(s) with class "disc" back to "block".

Matt
ELATED : )


--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt, that did the trick.

Buddy