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

Question

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.

Answer 1

Since I don't know how to control only the list marker size with CSS and no one's offered this yet, you can use :before content to generate the bullets:

li {     list-style: none;     font-size: 20px; }  li:before {     content:"·";     font-size:120px;     vertical-align:middle;     line-height:20px; } 

Demo: http://jsfiddle.net/4wDL5/

The markers are limited to appearing "inside" with this particular CSS, although you could change it. It's definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest - plus you can choose any character you want for the marker.

If you go the image route, see list-style-image.

Answer 2

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.