Grow your CSS skills. Land your dream job.

Font size of bulleted list

  • # July 8, 2009 at 9:57 pm

    Each time I post, any bulleted list is of a font size larger than the font size of the rest of my text. I have searched through my CSS and am unable to find either (1) the offending code, or (2) possible place to enter the code which might re-size my bulleted list to be the same font size as the rest of my text. Here is a sample post that I am talking about: http://nettingitout.com/. I suspect (but am not sure) that I need to do something to this code to make the correction – question is, what is the right correction to make to this code, if this is indeed the right code to make a correction to:

    Code:
    div.entry-content p {
    margin: 1em 0;
    }
    div.entry-content ul li {
    list-style: square;
    }
    div.entry-content ul li ul {
    margin-bottom: 0.3em;
    }
    div.entry-content ul li ul li {
    list-style: circle;
    }
    div.entry-content ul#linkcats, div.entry-content ul#linkcats li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    div.entry-content ul#linkcats li ul li {
    list-style: square;
    }
    div.entry-content img.center, div.entry-content img.centered, img.aligncenter {
    display: block;
    margin: 0.4em auto;
    }
    div.entry-content img.alignright {
    margin: 0.4em 0 0.4em 1.1em
    }
    div.entry-content img.alignleft {
    margin: 0.4em 1.1em 0.4em 0;
    }

    Thanks
    ;)

    # July 8, 2009 at 10:33 pm

    Just off the bat here… I looked at your site with firefox, and your ul is inheriting its font size from the wrapper div, which is 14px. Your p tag, on the other hand, you have specified an em value of 0.85, which will work out on most browsers set to default (I believe) at around 11 or 12 pixels.

    I don’t know if you have a reset in your CSS, but I always find it handy to stick the following into my stylesheet right away…

    Code:
    p, li { font-size: 16px; }

    You can then use em values after that which will be relative to that 16px value. Otherwise, in the short term, just give your li tag a specific font-size value (in this case match it to the .85em value of your p tag) and that will stop it inheriting this value from the wrapper div.

    Hope this helps!

    EDIT – I’m not big on ems, so someone else might correct what I said in relation to them above – nontheless, you still need to specify that font-size value for your list items… ;)

    # July 14, 2009 at 6:12 am

    EamonnMac, a belated thank you for your help here. I have gone back and forth on using em’s vs. px. Your advice is very helpful. thanks again.

    # July 14, 2009 at 10:01 pm

    No probs, hope it works out! If not, just post… :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".