display: table and Firefox

[Brian]

Hey gang,

I can’t seem to get display: table to act right in firefox. When I use display: table in Chrome, no issues, it acts like it’s supposed to.

Now, display: block in Chrome doesn’t act like it should, either for some weird reason.

display: block should stack on top of each other like rows but in chrome, they kind of slip under each other almost as if a z-index were present. Display: table works fine, however.

Is this making sense? Do I need to use some kind a vendor prefix for ff for display: table?

Sorry, forgot to add the link my website: http://www.harshclimate.com/test04/ . You’ll notice the gray area that is displayed fine in Chrome. It stays in layout but then in ff it breaks out to the right.

(excuse the strange colors as they are just for testing)

[Paulie_D]

It might be simpler for you to demo your problem in Codepen.io so we can see what the code actually is and how you are applying it…rather than having to wade around in a linked site with browser Developer Tools.

[Pinki]

Dont use display table.

The Problem you have, has nothing to do with display:table;
The Problem you have, is because your flow is super messed up.

You should understand how css works.

Delete this display: table nonsense ;) and add overflow:hidden to your header.row

Pinki

[Brian]

Yeah, I’ve never really learned much about css. Or anything for that matter.

Thanks, I’ll try that when I get home from work.

[__]

BTW, in the future, keep in mind that when you use display:table, the immediate child elements are expected to be display:table-row (or table-cells, if you don’t need any rows). It won’t work correctly or uniformly across browsers otherwise.

Also, I don’t know if you’ve changed anything since your OP, but I don’t see the problem you describe. Your page looks the same in FireFox and Chrome.

If you haven’t solved this yet, please make a reduced test case (e.g., on codepen) so it’s easier to help.

[Brian]

Thanks, Underscore :) I’m not sure why I’m seeing it, then. Very strange. I’ll eliminate display: table and probably start from scratch. I’m just not understanding why display: block isn’t displaying the way it should. Like I said, I’ll start from scratch and see if it clears up.

[Brian]

So I tried adding overflow: hidden to the header, main, article and footer and it all seemed to clear up. Thanks for that. I think I’m still going to start from scratch even after removing several things from the css.

[Author]

Posts