Hello!

I am having trouble with displaying my user's avatar images on this theme. The css that I am sending for the "picture" class is as follows:

.picture {
  float: right;
  display: inline;
}

Instead of wrapping the text around the image, as I was hoping would occur, the first paragraph wraps around the image while the second paragraph does not begin until after the image has displayed completely.

In hopes that a visual aid may assist, please see below for what is occurring:

First paragraph text. First paragraph text. First paragraph  ||avatar graphic||
text. First paragraph text. First paragraph text. First        ||avatar graphic||
paragraph text.                                                         ||avatar graphic||
                                                                             ||avatar graphic||
                                                                             ||avatar graphic||

Second paragraph text. Second paragraph text. Second paragraph text.
Second paragraph text. Second paragraph text. Second paragraph text. &c... 

Here is what I would like to have:

First paragraph text. First paragraph text. First paragraph  ||avatar graphic||
text. First paragraph text. First paragraph text. First        ||avatar graphic||
paragraph text.                                                         ||avatar graphic||
                                                                              ||avatar graphic||
Second paragraph text. Second paragraph text. Second   ||avatar graphic||
paragraph text. Second paragraph text. Second paragraph text. Second
paragraph text. Second paragraph text. Second paragraph text. &c... 

Does anyone know how this might be accomplished?

Btw, I have included the contents of my node.tpl.php file below.

Thanks,
-Adam

<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
  <?php if ($submitted): ?>
<?php
            print 'By ' . theme('username', $node) . ' | Published ' . format_date($node->created, 'custom', ' D, M d, Y h:m' . '<p>');
       
?>
  <?php endif; ?>
<?php if ($picture): ?>
  <?php print $picture ?>
<?php endif; ?>
  <div class="content">
    <?php print $content ?>
  </div>

  <div class="clear-block clear">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

    <?php if ($links): ?>
      <div class="links"><?php
print '';
print '';
$all_links = array();
foreach ($node->links as $link) {
  $all_links[] = l($link['title'], $link['href'],
    $link['attributes'], $link['query'],
    $link['fragment'], FALSE, $link['html']) ;
}
if ( count($all_links) ) {
  print implode(' | ', $all_links);
}
print '';
?></div>
    <?php endif; ?>
  </div>

</div>

Comments

adamcraig’s picture

I have found that it is not only the avatar graphic which causes this problem. It is all graphics rendered by the <img> tag. I am not sure why this is happening, and I must admit to being a novice, at best, in regards to my knowledge of CSS.

If it is some assistance, the following url shows a node the way I want graphics displayed on it (look towards the bottom of the node body): http://www.peacefulassembly.org/node/47 and this url shows the same node, with image tags in the same format as before, the way the multiflex theme is currently rendering it: http://develop.peacefulassembly.org/node/47

All help is both greatly needed and appreciated.

-Adam

adamcraig’s picture

Title: Profile Image (Avatar) Display Problem » Problem Solved

I have solved the problem!

A friend of mine suggested that the problem rested with the "p" class and had nothing to do with CSS configurations for images. So, I disabled all the "p" classes in my CSS files, saw that the problem was resolved, and began to re-enable the tags.

The problem class read as follows:

.footer:after, p:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

I began to disable the tags one by one and found that the offending one was: content:".";

I don't know what its purpose was, but I left it working on the .footer:after class and copied and pasted in a new class for p:after without the content:"."; tag. Problem solved!

stloescher’s picture

A perfect solution. It delivered as promised. Perfect text wrap.

vm’s picture

Title: Problem Solved » Profile Image (Avatar) Display Problem

changing title back to something that describes the problem