Why so much vertical offset in HTML list in Chrome - whitespace from PHP or styling?

Question

I'm struggling to understand why I get so much vertical offset (170px-ish) from one <li> element to the next. I see this in Chrome but not in Firefox. It only happens in <li> elements when the PHP is present. The offset goes away if I either remove the <p> tags from the first <li> element, remove the PHP foreach in the second, or remove the styling for the <p> and <a> tags. I've included the css below.

Any help would be very much appreciated.

Thanks, Steve

<ul class="gridRow">
    <li class="cell-2-4 first-child linkBox">
        <a href="<?php echo site_url(); ?>/pianos/" class="pianosLarge">Pianos</a>
        <p>other Links</p>
    </li>
    <li class="cell-2-4 last-child">
        <div class="home-news">
        <?php foreach ($recentposts as $post) : {
            setup_postdata($post);?>
            <h2><?php the_title();?></h2>
            <?php the_content();?><?php
            }
        endforeach;
        wp_reset_query();?>
        </div>
    </li>
</ul>

CSS:

.gridRow li {
    height:100%;
    display:inline-block;
    margin-left: -4px; 
    margin-right: 30px;
    overflow: auto;
}

.cell-2-4 {
    width: 474px;
}

.linkBox a {
    display: block;
    height: 225px;
    padding: 0.6em;
    font-size: 2em;
}

.linkBox p {
    padding: 0 1em 0 1em;
    border-top: 1px solid lightgray;
}

li.first-child {
    margin-left: 0; 
}

li.last-child {
    margin-right: 0; 
}

EDIT:var_dump of $recentposts as requested by stackErr:

object(WP_Post)#288 (24) { ["ID"]=> int(54) ["post_author"]=> string(1) "1" ["post_date"]=> string(19) "2013-06-24 10:23:20" ["post_date_gmt"]=> string(19) "2013-06-24 10:23:20" ["post_content"]=> string(64) "Here at siteName we sell descant, treble recorders ..." ["post_title"]=> string(33) "Recorders for the new school term" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(11) "tune-pianos" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-06-24 10:31:37" ["post_modified_gmt"]=> string(19) "2013-06-24 10:31:37" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(34) "t/grandpianos/?p=54">http://localh_t/grandpianos/?p=54" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" }

Hi stackErr, assuming you mean var_dump the $post. I've added this to the edit — Steve
Can we see the output source code? i.e. what you'd see if you did "view source" ... you're mixing up your PHP control structures as well. either <?php foreach($recentposts as $post) { ... echo HTML ... } ?> OR <?php foreach($recentposts as $post): ?> ... HTML ... <?php endforeach; ?> - the second option is better as you're in output land. — CD001
@Steve post the output of <?php foreach ($recentposts as $post) : { setup_postdata($post);?> <h2><?php the_title();?></h2> <?php the_content();?><?php } endforeach; wp_reset_query();?> — stackErr

Patrick Patrick · Accepted Answer · 2013-06-24T15:57:34

I think you may want to use floats. There seems to be an issue with the inline-block and height 100% property.

EDIT: If you don't want to use floats, then use this:

display:table-cell;

instead of inline-block, in this case.

Here is the float method. CSS for .gridRow li

.gridRow li {
    float: left;
    display: block;
    margin-left: -4px; 
    margin-right: 30px;
    overflow: auto;
}

You may need to clear that float depending on your HTML structure and content. A clear and distinct way to do it to use a div.clear after your floated content. (There are better ways though).

.clear{ clear: both; }

<div class="clear"></div>

Why so much vertical offset in HTML list in Chrome - whitespace from PHP or styling?

1 Answers