need help troubleshooting weird article tag height problem

I’ve got a site in dev and have some custom post styling for the blog page. The theme is built on _s and for whatever reason my articles are adding extra height, but in Chrome developer and Firebug no height is being set.

The page:

  • aecnu
    • WP Unicorn

    Greetings Shannon Mac,

    Sorry to see that you see an issue but I just visited your site and it looks absolutely normal to me, screen shot below.

    Are you running any caching plugins?

    Are you using two completely different browsers, one for developing and the other for testing?

    Please advise.

    Cheers, Joe

  • Shannon Mac
    • WPMU DEV Initiate

    Hi Joe – As of right now, no caching plugins – but I think you caught me just as I was messing with the positioning being relative vs absolute for those content boxes. Take a look again and I’ll stop messing for a while. I can’t see why the articles are all taking on so much height and leaving the footer.entry-meta so far below.

  • aecnu
    • WP Unicorn

    Greetings Shannon Mac,

    Thank you for the additional input but I visited again and find nothing unusual about the site as shown in my current screen shot below.

    What am I missing here?

    Please advise or perhaps a screen shot with an indicator of some kind showing what you are referring to?

    Please advise.

    Cheers, Joe

  • Imperative Ideas
    • HummingBird

    You've got some broad CSS margin definitions causing all of the extra space. For example, your margin above the footer is here:

    .blog #primary .entry-content {
    margin: 0 0 30px;

    Having the margin defined on both the entry and the blog ID is tacking 30px on the bottom of both (see image).

    The next 30px after that is being caused by another DIV, though I haven't sussed out which one. You have all of the margin you need here:

    .blog #primary article {
    background: none;
    padding-left: 22px;
    margin: 20px 0;
    padding-bottom: 0;

    Unfortunately, it looks like you crafted the CSS as you went instead of planning it and that you may have gotten a bit lost along the way with revisions. It used to happen to me all the time when I was first working professionally.

    I'll tell you what my friend who is a lead UX person at Hot Studio told me: "If you can't fix it, start the CSS over again"

    I know it's not what you want to hear but that's often the best solution.

    You may be able to fix this but you've got stray margins all over the place between the classes that got inherited from your framework template and the stuff you've added yourself.

  • aecnu
    • WP Unicorn

    Greetings Shannon Mac and Ian,

    @imperative Ideas (Ian) thank you for seeing what apparently I did not which is truly appreciated that you have pointed out what I could not figure out to be the issue.

    Some well deserved rep points sent your way.

    @shannon Mac it appears though I could not see what you were referring and therefore not looking at the code, Ian indeed spotted the issue being css. Please make the applicable adjustments to your css where needed.

    Thank you both for being WPMU DEV Community Members!

    Cheers, Joe

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.