CSS class not affecting alignment or size.

  • Resolved maychung

    (@maychung)


    15 years, 2 months 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;}
Viewing 5 replies - 1 through 5 (of 5 total)

  • 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.

    Thread Starter maychung

    (@maychung)

    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?

    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…..

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

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

    Thread Starter maychung

    (@maychung)

    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;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS class not affecting alignment or size.’ is closed to new replies.