Susy - CSS Grid

Firefox Issue With Foundation And Vertical Alignment

While working on another theme for ClickFork, I came across this weird bug when trying to vertically align an image inside of a logo container.

The layout

I have a very simple html markup and want to vertically align an image inside a fluid width container. I am using Foundation CSS as the base stylesheet framework.

HTML

<code><div id="logo" class="large-3 columns">
    <h1>
        <a href="http://www.yoursite.com">
            <img alt="Image" src="img/img_logo.png">
        </a>
    </h1>
</div>

CSS

#logo h1 {
    display: table;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
#logo a {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#logo a img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

The issue

Everything works great in all browsers apart from Firefox, where the image breaks out of the container at a smaller screen sizes. The image ignores the max-width property and doesn’t scale down as expected.

Not sure if it’s the combination of Foundation CSS and display: table, but the fix is pretty simple.

The solution

Adding table-layout: fixed to the containing element seems to fix this issue for Firefox. Now the logo image is vertically aligned in the middle of it’s containing element, and never grows out of it.

#logo h1 {
    display: table;
    table-layout: fixed;    
    width: 100%;
    height: 200px;
    overflow: hidden;
}

Hope it save you some time when you come across similar issue on your project.

8 thoughts on “Firefox Issue With Foundation And Vertical Alignment

    1. Petr Tichy Post author

      I can’t remember Stefan, it’s been a long time ago, but I remember this being quite frustrating so I’ve posted about it hoping it will make someones day. The someone is you 🙂

      Reply
  1. Michael Roach

    You just saved me hours, I develop with Foundation & WordPress and you just saved our agencies home page. Thank you!!!

    Reply
  2. Kirsty Van Acker

    Thanks for writing this article! I was using Graham Heath’s solution for centering content vertically (http://foundation.zurb.com/forum/posts/526-how-to-center-grid-row-vertically) but it was breaking in firefox. Adding table-layout fixed the problem.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.