Defining the size of the list-style square

Posted on 2006-05-14
Last Modified: 2008-03-10
Can't seem to find this - and would prefer not to use a graphic.. I wish to increase the size of the bullet in the list css.  Basically I want the "square" attribute to be bigger than the size it shows. I have been unable to locate how to properly do that.
Question by:Quetysis
    LVL 30

    Accepted Solution

    The size of the bullet depends on the font size.
    The trick is to increase the font-size on the <li> and use a nested element to decrease the font-size of the <li>'s content.  To get the best result, you'll need to play with line-height or negative margins on the <li> to reduce the additional spacing created by the large font.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <style type="text/css">

    body {
      background: #EEE;
      color: black;

    ul {
      list-style: square;

    li {
      font-size: 200%;

    li span {
      font-size: 50%;



    LVL 8

    Expert Comment

    >> The size of the bullet depends on the font size.

    No it isn't -- At least not for Firefox and IE 6. (I haven't checked the W3C doc yet)

    In IE you can use the non-standard property "zoom:" instead, e.g.,

    <div id="ul_container"><ul>

    <style type="text/css">
    #ul_container {   zoom: 2; }
    ul {   list-style-type: square; }
    li { zoom: 0.5; }
    LVL 30

    Expert Comment

    >>  No it isn't
    Yes it is...  well... except in IE6 (the code from my post works fine in FF and Opera).

    IE6 is very strange with markers, the size of the marker depends on the text-size (in the 'view' menu) but does not depend on the font-size.  That is completely illogical.

    So, for IE6, using the 'zoom' is a possible solution, but i guess the marker size will still depend on the text-size.
    LVL 8

    Assisted Solution

    Strange, the code works in Fx when it is in an independent file, but not in generated content.

    Anyway, the code posted by GrandSchtroumpf *works for Firefox*, and I made some mistakes during the test.


    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now