CSS list's bullets not displayed

HTML & CSS
1

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-type: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-type: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 because of a previouse css code in the same CSS file.

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

2

Moreover, if I remove display:block; from the li’s css code, then there is not break between li tags because of a previouse css code in the same CSS file.

If you set the list to display:block then it is no longer a list and no bullets will show.:slight_smile:

There is no need to use display:block anyway unless you have previously set it to display:inline somewhere.

If you are trying to over-ride display:inline then turn it back into a list item width:


display:list-item

That should bring the bullets back :slight_smile:

In your code above you are setting the padding-left for the bullet space but don’t forget that some browsers will already be using margin-left for this and therefore the space will be doubled. Set margin-left to zero for the ul and then just set padding-left.

1 Like
3

Could you please take a look at this link http://jorkor4.freehostia.com to see what I mean with this error?

4

I’m not seeing hte error :). Bullets are showing.

5

Hi,

I can see the page but what’s the problem exactly?

Your undohtml.css file is missing btw.

http://jorkor4.freehostia.com/estilos/undohtml.css

You also have a number of errors like this:


    background-position: 0px 5px;
    ;
    background-repeat:no-repeat;

If you are trying to over-ride this style:


div.MenuPrincipal ul li {
    list-style-type : none;
    display : inline; /* para que ponga los elementos de una lista ordenados horizontalmente */
}

Then you will need to ensure that you have the same or greater weight on the new rule.


[B]div.MenuPrincipal ul li.special[/B] {display:list-item}
6

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 like you said. You are a genius.
Thanks

7

Yep, that’s the way of all CSS :).

If you declare something in two places, (same property, such as font color) then it will calculate which selector has the most weight. Whichever one has the greater weight will win out :).