WordPress.org

1. MayChung
   Member
   Posted 2 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
   Member
   Posted 2 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 2 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 2 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
   Member
   Posted 2 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 2 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.