WordPress.org

Ready to get started?Download WordPress

Forums

Post Image going past the bottom border (3 posts)

  1. alisonailea
    Member
    Posted 5 years ago #

    I'm running into a really weird problem with my blog posts. I have it set so that on the main page just the Time-stamp, Excerpt, and Thumbnail are displayed however the thumbnail image, if its taller than the excerpt text, keeps dropping over the bottom border of the post.
    Here is what it look like NOW

    and here is what it SHOULD look like

    Here is what is creating the posts on my main page.

    `<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="article" id="post-<?php the_ID(); ?>">
    <div class="articleImage">

    ">
    <?php
    $szPostContent = $post->post_content;
    $szSearchPattern = '~<img [^\>]*\ />~';

    preg_match_all( $szSearchPattern, $szPostContent, $aPics );

    $iNumberOfPics = count($aPics[0]);

    if ( $iNumberOfPics > 0 ) {
    for ( $i=0; $i < $iNumberOfPics ; $i++ ) {
    echo $aPics[0][$i];
    };
    };

    ?>

    </div>
    <div class="articleText">
    <div class="date">posted on <?php the_date(); ?></div>
    <img src="http://www.ailea-studio.com/test/wp-content/themes/aileastudio/images/innerContentBorder.gif" alt=" " />

    <h2>"><?php the_excerpt(); ?></h2>
    </div>

    </div>

    <?php endwhile; else: ?>
    <div class="article">
    <div class="articleText"><?php _e('Sorry, no posts matched your criteria.'); ?></div>
    </div>
    <?php endif; ?>`

    and the related css

    `.article {
    display:block;
    position:relative;
    top: 24px;
    padding-top:30px;
    padding-bottom: 20px;
    width: 600px;
    height:auto;
    text-align:left;
    padding-left:27px;
    background: url(images/mainBorder.gif) no-repeat bottom right;
    }

    .article img{
    float: right;
    padding: 5px;
    }

    .articleText{
    position:relative;
    width: 288px;
    text-align:right;
    font-size:14px;
    display: block;
    }
    .date {
    margin-bottom: 26px;
    text-transform:uppercase;

    }
    .date em{text-transform:lowercase;}

    .articleText h2{
    text-align:right;
    font-size:30px;
    color:#333333;
    }

    .articleImage{
    position:relative;
    margin-top: -50px;
    right: 0px;
    width: 306px;
    float: right;
    text-align:right;
    display:block;

    }

    .articleImage img{text-align:right; display: block;};`

  2. kkarpieszuk
    Member
    Posted 5 years ago #

    firebug is a perfect tool for resolving problems with css, but to use it, you need to work on live html, not screenshots

    install firebug for firefox or show as working webpage

  3. alisonailea
    Member
    Posted 5 years ago #

    install firebug for firefox or show as working webpage

    I use firebug for all debugging problems but for some reason its not showing me what's wrong in this situation.

    For several reasons I am not able to post a link to the full working webpage at this time.

    Despite the fact that my thumbnail is within the .article div it seems to be acting as its own separate and absolutely positioned element. Firebug shows the .article and .articleText working together but .article doesn't seem to be picking up the height of the thumbnail within the post.

    If I add a height property to the .article div that is large enough to contain the thumbnail then it all looks correct, however because the size of each post and its thumbnail vary adding a strict height property is not an option.

    Help?

Topic Closed

This topic has been closed to new replies.

About this Topic