PDA

View Full Version : CSS list bullet not displaying ini Mozilla



maryann
02-19-2007, 03:01 AM
My ordered and unordered lists in Mozilla do not display bullets or numbers. Is this a Mozilla issue? They do work in IE. Code is below. I tried using with #main and without.

Thanks
MaryAnn

<div id="main">

<ol>
<li>item 1 </li>
<li>item 2 </li>
</ol>

</div>
-------------------------------------
/*External style sheet */
#main ol{
list-style-type: decimal;
margin: 0;
padding: 5px;
font-size: 0.8em;
display: block;
color: #333;
border: 2px #fff solid;
}
#main li{
margin: 0;
padding: 5px;
font-size: 0.8em;
display: block;
color: #333;
{
ol li{
display: list-item;
list-style-type: decimal;
margin: 0;
padding: 5px;
font-size: 0.8em;
display: block;
color: #333;
*/ /*border: 2px solid #00f;*/
}

Excavator
02-19-2007, 03:46 AM
Hello maryann,
A little too much display: block;


#main ol{
list-style-type: decimal;
margin: 0;
padding: 5px;
font-size: 0.8em;
display: block;
color: #333;
border: 2px #fff solid;
}
#main li{
margin: 0;
padding: 5px;
font-size: 0.8em;
color: #333;
{
ol li{
display: list-item;
list-style-type: decimal;
margin: 0;
padding: 5px;
font-size: 0.8em;
/*display: block; take this one out and see what happens*/
color: #333;
*/ /*border: 2px solid #00f;*/
}

maryann
02-19-2007, 04:49 AM
Hey, Yes! It does work. I'm not sure why yet but I'm making some progress...Thank you.

Now I have a nesting problem with both IE and Mozilla but I'll see if I can troubleshoot this.


Thanks again :thumbsup:

maryann
02-19-2007, 11:53 PM
OK, last night I removed the display:block. the numbers do display with ol on Mozilla. Today, I must have tweaked something strange because the numbering is way off.
<!--html code-->
<ol>
<li>one</li>
<li>two</li>
<li>three</li>

<ul>
<li>bullet one</li>
<li>bullet two<li>
</ul>


<li>four</li>
</ol>

<!--Output-->
01. one
2. two
3. three
bullet one
bullet two
7. four

It looks like the counting is starting at the <ol> tag. If you start with 01 at the <ol> and count every <li> you get 7.

Any ideas? IE display is fine. Safari and Mozilla display 01. 2. 3. bullet, bullet, 7.

I don't know if this is css or html problem.

#main ol{
list-style: decimal;
display: list-item;
padding: 5px;
font-size: 0.8em;
color: #333;
}


#main li{
margin: 0;
padding: 5px;
color: #333;
}


Thanks
MaryAnn:eek:

phoenixshade
02-20-2007, 12:11 AM
I don't know if this will fix your problem, but there is a problem with the HTML code. The <ul> should be inside of a <li> (reference (http://www.w3schools.com/xhtml/xhtml_html.asp)), like this:


<ol>
<li>one</li>
<li>two</li>
<li>three
<ul>
<li>bullet one</li>
<li>bullet two</li>
</ul>
</li>
<li>four</li>
</ol>
See if that takes care of your problem.

It's always a good idea to run your code through a validator, such as the one in my sig. It only takes a few seconds for it to find these kinds of things, and it will possibly save you hours of work later.

Happy coding!