image display alignment

[gsdcypher]

hi,

the code below displays the stars gif so that it sticks above the text it is next to. anyone know how to display the gif so it is in centered with the text next to it? in others a little of the image will be below the text and a little above (instead of all of the image above the text)...

    echo TEXT_CURRENT_REVIEWS_RATING . ' <strong>' . $average_rating . '</strong> ' . zen_image(DIR_WS_TEMPLATE_IMAGES . 'stars_' . $stars_image_suffix . '.gif', sprintf(BOX_REVIEWS_TEXT_OF_5_STARS, $average_rating));

thanks!

[gjh42]

We can't answer this without its page context. We need to see the site, or at the least the "view source" to know what HTML and class/id tags are being output.

[gsdcypher]

hi. no problem. does this help from view source?

-->
<p class="reviewCount">Average Rating: <strong>5</strong> <img src="includes/templates/template_default/images/stars_5.gif" alt="5 of 5 Stars!" title=" 5 of 5 Stars! " width="90" height="20" />Current Reviews: <strong>1</strong><br class="clearBoth" /><br class="clearBoth" /></p>
  <br class="clearBoth" />

thanks!

[gjh42]

This output would normally display on one line, provided there is enough width to allow that. Any CSS that applies to this element directly or by descent could affect this. Can you show us the site live?

[gjh42]

Picture=1000 words... :)
You do have the content displaying in one line, but the image is offset from the apparent baseline so as not to be centered on the text.

Add to your stylesheet

.reviewCount img {position: relative; bottom: -0.5em;}

[gsdcypher]

awesome. thank you!