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;
}
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?
You absolute leg-end! Thank you!
