[resolved] Different font for 1st and 2nd paragraphs (6 posts)

  1. TabrezIqbal
    Posted 10 years ago #

    My blog is displaying one font size(default for such text) for the first paragraph and another(smaller than the first) for the second paragraph onwards *only when I put these paragraphs in a list*, either using <ol> or <ul>. Could it be an issue with the theme I am using?(I use clasikue theme). I am not well versed in HTML and CSS to sort out the issue myself but can follow if instructed on what to look for/change in the CSS code.

    My blog: http://beans.seartipy.com/
    Example of my problem:
    1. http://beans.seartipy.com/2006/05/24/should-i-be-developing-ajax-applications-using-google-web-toolkitgwt/
    List item 3. Look closely at para 1 and para 2 there.
    2. http://beans.seartipy.com/2006/05/22/upgrading-from-drupal-466-to-drupal-47/
    List items 5 & 7.

    May not seem as a big issue but surely would like to sort that out. Thanks for the help.

    PS: can't we preview the question before posting?

  2. ebusiness
    Posted 10 years ago #

    The style of the 'larger' font items is dictated by your li style in the style sheet.

    The smaller font items are wrapped in tags and hence are dictated by the style relating to that tag.

  3. Doodlebee
    Posted 10 years ago #

    My guess would be that you have font sizes set for *both* your

    • tags. It probably looks something like so:

      ul {
      font size:0.9em;}

      li {

      What happens is that the initial ul area will be 90% of the *body* font size (or page default), and then the li area will be 90% of the UL size - making for smaller fonts as you go down a list.

      Remove one of the font sizes - from either the UL or LI - in your CSS and it should right itself.

  4. TabrezIqbal
    Posted 10 years ago #

    The difference in font sizes is not for the text right after the ul tag and the subsequent li tags. within the same li element, the font size is different for the first paragraph from the rest of the paragraphs. WordPress automatically generates the <br /> and <p> tags, so i am not able to know where the styling of <li> and that <p> is messing it up.

    Edit: looked at the generated HTML using "View Source" and found this interesting:
    <li> GWT allows the developers to interact with the browser’s history stack which means that the Ajax applications created using GWT can allow the users to use the <strong>‘Back’</strong> and <strong>‘Forward’</strong> buttons of the web browser and to bookmark the various pages of the website.
    <p>Refer to points 2 & 3 in my <a href="http://beans.seartipy.com/2006/05/20/a-case-against-ajax-web-development-model/">earlier post</a>.

    look at how the <p> tag is used only for the second paragraph(starting at "Refer to points....") and not used for the first(starting at "GWT allows the developers..."). I think i should look at the font size for <li> and <p> and make them equal.

    Alternatively, is there a way i can get to specify my own <br /> and <p> tags instead of WordPress generating them for me? I can see the full HTML source when I am using the WYSIWYG editor, but as I use the simple editor, there is no option to look at the full HTML source AFAIK.

  5. TabrezIqbal
    Posted 10 years ago #

    Thanks everyone, fixed it at last. Changed the following code in my theme's style.css:

    p, li, .feedback {

    font: 90%/175% verdana, sans-serif;

    to this:
    p, li, .feedback {

    font: 100%/175% verdana, sans-serif;


    assuming that first <li> is reducing font size by 90% and the next tag is further reducing it by 90%(no idea what the other 175% is there for :) ). But this also means that content in <li> would be same as the content outside of it.

    Any suggestions how I can access the raw HTML code when using the simple editor(not the WYSIWYG) so that I can have full control where exactly the tags would appear?

  6. LiverpoolLad
    Posted 10 years ago #

    Tabrez, you can alter the html in the php files to suit your own purposes, be careful and just alter obvious html mark ups that you know are called up in the WordPress loop.

    I've added a few <br /> and altered a few other little bits and pieces.

    You can untick the wysiwyg editor in options and stick to the basic editor, which enables you to add your own divs, and style them in the css.

    Hope that helps.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.