Forum Moderators: not2easy

Message Too Old, No Replies

why css lists's bullets not displayed?

         

thosecars82

12:45 am on Apr 9, 2010 (gmt 0)

10+ Year Member



Hello
I have a problem with this simple example

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

which I tested successfully in a browser. Whenever I include this code in a website, then the bullets do not show up any more.

I am marking the ul with this css code:

clear:left;
padding-top:25px;
padding-left:20px;
padding-right:20px;
font-size:14px;
line-height:30px;
text-align:justify;
font-weight:bold;
text-transform:uppercase;
list-style-position: outside;
list-style:disc;

And the li with this css code:

display:block;
line-height:160%;
margin-bottom:15px;

Everything shows up as I want except this bullet which is not displayed. However, I did write list-style:disc; like you can see in the CSS code for ul tag.

Moreover, if I remove display:block; from the li's css code, then there is not break between li tags.
Any idea?
Thanks

lavazza

1:31 am on Apr 9, 2010 (gmt 0)

10+ Year Member



Instead of
list-style:disc;
try
list-style-type:disc;

Note that disc is the default... maybe there's another piece of code somewhere that's over-riding what you want

thosecars82

10:16 am on Apr 9, 2010 (gmt 0)

10+ Year Member



Replacing list-style with list-style-type did not solve the problem.
I looked for another piece of code that might over-ride this but did not find it. Moreover, I tried to lower the css code I showed you to the bottom of the file which contains all the CSS code and it did not work either.
Any other idea?
Thanks

rocknbil

7:35 pm on Apr 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you try

list-style-position: outside;
list-style:disc;

Moving these into the li selector? You claim to have them in the UL selector, these apply to the li's, not the ul.

thosecars82

10:49 pm on Apr 9, 2010 (gmt 0)

10+ Year Member



Thanks, I fixed it eventually.

I thought that a subsequent css code forcing this ul to display:list-item; would fix the issue, but it seems, once the first display:inline code is read for a particular ul tag, then it does not reconvert it to a list if it finds some code which does that later in the css code unless you set greater weight on the new rule.
Thanks