WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS class not affecting alignment or size. (6 posts)

  1. MayChung
    Member
    Posted 4 years ago #

    This is such a minor problem it's so frustrating that I can't figure it out. I've made a CSS class for my image captions; I want them a smaller font size, aligned to the right, and in italics. But the class seems to only apply italics, not the size or alignment. This is the post in question.

    I just know I'm gunna be told it's something ridiculously simple.

    This is my html:

    <p><img src="/2010/blog/universaltype.jpg" class="pull-2" /><br />
    <span class="caption">(images from Pentagram)</span></p>

    And my CSS:

    body {background-color:#fffff;
    color:#516064;
    margin:0;
    padding:0;
    text-align:center;
    font-size:75%;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
    
    p {font-size:1.167em;
    line-height:1.5em;
    margin:0 0 1.5em;}
    
    span.caption {font-style:italic;
    text-style:italic;
    text-align:right;}
  2. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    Add font-size declaration to your span.caption

    span.caption {
    font-style:italic;
    text-align:right;
    font-size: 1em;
    }

    or whatever size you want it to be.

  3. MayChung
    Member
    Posted 4 years ago #

    I realised I put italic twice in my CSS. I have changed it to:

    span.caption {
    font-style:italic;
    text-align:right;
    font-size: 1em;
    }

    But again, only italic is applied. Not alignment or size. Any other suggestions?

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    a couple quick things to try

    Do you use firefox? Hopefully yes, if not, get it! Then install the firebug developer addon. Wit that you can study the css that is being appl;ied to any element.....so you can see what is overriding your alignment/size settings.

    or...you can sometimes add !important (text-align:right !important;)
    to your css to get it to override an inherited style.....

  5. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    Adjust the font-size to taste... .6em, .7em, .8em

    span.caption {
    font-size:.7em;
    font-style:italic;
    text-align:right;
    }
  6. MayChung
    Member
    Posted 4 years ago #

    I FINALLY figured it out. <span> tags don't take on font size or alignment attributes. I had to use <p> tags and alter the margins to make sure there was no gap between the image and caption.

    Thanks for your time :)

    Html:

    <p class="caption"><img src="/2010/blog/universaltype.jpg" class="pull-2" />
    (images from Pentagram)</p>

    CSS:

    p {
    font-size:1.167em;
    line-height:1.5em;
    margin:0 0 1.5em;
    padding:0;
    }
    
    p.caption {
    font-style:italic;
    text-align:right;
    font-size:1em;
    line-height:1em;
    margin:0 0 1.5em;
    padding:0;
    }
    
    img {
    margin:0 0 .5em;
    padding:0;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic