css

How to control size of list-style-type disc in CSS?

My HTML first:

<ul class="moreLinks" >
    <div>More from Travelandleisure.com</div>

        <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
    <li><a rel="nofollow" href="">xyz1</a></li>
</ul>

I know that I can apply font-size on li very small so that disc look correct to me and then apply css to "a" inside li. But I do not know why this is not working on the site I am working. I cannot control the html directly.

I saw that when I make this:

.farParentDiv ul li {
    list-style: disc inside none;
}

TO this:

.farParentDiv ul li {
    list-style-type: disc;
    font-size:10px;
}

and now after applying font-size to "a", it works in Firebug. but from my css file. I tried a lot but tired. I can overwrite the above this in css file but cannot change it directly as I did in firebug. Please write what can be the problem?

I used to put dots (.) just before link inside and then apply css on that to control the disc size, but as I said, I cannot control the HTML.

Solution

  • I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.

    .moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

    Also, you may want to move your DIV outside of the UL. It's invalid markup as you have it now. You can use a list header LH if you must have it inside the list.