Welcome to the MacNN Forums.

l008com · Dec 16, 2011, 03:31 AM

I'm having the strangest problem with this website, that I just can't figure out. I was re-coding my website with pure HTML5. Everything was going great. Then suddenly, I noticed that my facebook box (the one with the faces) was adding tons of height to it's row for no apparent reason. I've used Safari and Firefox's inspectors and I can't figure out WHAT is causing this space. I can't find any reference to it at all. And yet, there it is.

On-Site Apple Mac Help, Repair & Consulting, Boston & Eastern Massachusetts

It was working normally for a while. Then as I continued building the page, I noticed it had this weird height. But what is causing the height?

This page is nearly identical, and there is no weird height:

On-Site Apple Mac Help, Repair & Consulting, Boston & Eastern Massachusetts

I am baffled

Doofy · Dec 16, 2011, 05:30 AM

According to CSSEdit, the difference is you're missing the "www-embed-refresh-vflUy4_Ee.css" stylesheet in the version with the space, so maybe there's a "fix" in that sheet?

l008com · Dec 16, 2011, 05:41 AM

That css file appears to be from youtube, because one page has an embeded youtube video and the other doesn't. That's not related to the problem though. I just switched it back so they are both showing the same "blog post". Still have that mystery space.

Doofy · Dec 16, 2011, 06:29 AM

OK.
According to CSSEdit's inspector, the page with the space doesn't have any CSS for the FB block... ...while the page without the space does. So somehow the spacing is being fixed by whatever you're leaving out of the new page's CSS.
That's my best guess.

andi*pandi · Dec 16, 2011, 06:37 AM

On my sites, I have had to override the css that facebook uses to get the box height where I want it, but this isn't a fanbox issue.

You're setting all your divs to display like tables, so you need some vertical align: top in there. Some boxes were aligning top and the others bottom, making the boxes too tall to display evenly. And then you need some padding.

layout_table > div {
background-color: white;
background-image: url("http://www.macfixer.net/images/background.png");
border: 1px solid #660000;
border-radius: 10px 10px 10px 10px;
color: #AE1F23;
display: table-cell;
padding: 15px;
vertical-align: top;
}

This fixed it for me in firebug. Oh, and moving to developer.

l008com · Dec 16, 2011, 01:20 PM

Hmmm the vertical-align: top did seem to fix it. Previously, those cells were already top-aligned, they must have been inheriting them from somewhere else, and then stopped for some reason.

Also, why is vertical align: top preventing the cells from GETTING taller? It works but I don't see why it works.

andi*pandi · Dec 17, 2011, 09:24 AM

I'm not sure what you mean by "prevents from getting taller"?

When I go to your page now and add content to any of those boxes, the boxes grow bigger to accommodate.

l008com · Dec 17, 2011, 02:34 PM

What I mean is, when you remove the vertical-align: top, why do those "cells" grow taller than their content? They should be the exact same height without that property, just possibly not aligned the way I would like them.

besson3c · Dec 17, 2011, 02:40 PM

Maybe what you want is display:inline-block? I believe the CSS tables are liquid, just like HTML tables. Besides, CSS tables do not work in IE 7, whereas inline-block can be made to work fairly easily.

l008com · Dec 17, 2011, 02:43 PM

A row in an HTML table wouldn't arbitrarily double it's height when you didn't specify a vertical-alignement, and then snap down to normal height when you did. I'm just trying to understand that. Inline blocks are not as function or flexible as tables, real tables or css emulated tables. And as far as IE7, **** IE7. No one uses it, and those that do should be well accustomed to failure.

besson3c · Dec 17, 2011, 03:07 PM

Originally Posted by l008com

A row in an HTML table wouldn't arbitrarily double it's height when you didn't specify a vertical-alignement, and then snap down to normal height when you did. I'm just trying to understand that. Inline blocks are not as function or flexible as tables, real tables or css emulated tables. And as far as IE7, **** IE7. No one uses it, and those that do should be well accustomed to failure.

It's your business, and I guess you have the luxury of being able to assume that the majority of your visitors are on a Mac, but IE 7 is still a generally supported browser within the industry, unfortunately.

I can't account for the problem you are describing, but I just mentioned inline-blocks because you can define an absolute height for them, and the space on your page where the Facebook widget is looks like the perfect place to drop in an inline block (along with the cells to the left of it).

andi*pandi · Dec 19, 2011, 10:22 AM

It's not that it's doubling height arbitrarily... mixing align top and bottom is contradictory. Either put a height in for the table, or such. I wouldn't even bother with making divs act like table rows/cells for this purpose.

Sometimes it's easier not to wonder why certain fixes work just to know they do.