Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Laura Nielsen
Laura Nielsen
7,200 Points

Box with content (div) - height property/vertical align not working in chrome.

I've made my way through CSS foundations. On my website, I tried implementing two divs that are placed on top of each other. When hovered over, the top div is replaced by the bottom div using transitions.

The text on both divs is supposed to be vertically aligned in the middle, and text-aligned center (I used table, and table-cell method to achieve the vertical alignment. In CSS Foundations line-height was used to achieve this effect, however, my titles and descriptions are on multiple lines so this simply won't work).

This appears to work in IE and Firefox. However, it does not display properly in chrome. In chrome, the text is aligned further down in the div, and the height is less than what I set it to.

Here's my html and CSS

<div class="wrap-hover">
<div class="side-a">
<h3>Multiline heading </h3>
</div>
<div class="side-b">
<h4 style="color: white;"> Multi line description to the heading</h4>
</div>
</div>
div .wrap-hover {
    position: relative;
    margin: 0 auto;
    width: 14.5em;
    height: 16.5em;
    transition: -webkit-transform 1s ease-in;
}

div .wrap-hover div {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 1em .25em;
    display: table;
}

div .wrap-hover .side-a {
    border: .5em solid #294369;
    background-color: #FFFFFF;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

div.wrap-hover div h3,
div.wrap-hover div h4 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

div .wrap-hover .side-b {
    border: .5em solid #FFFFFF;
    background-color: #294369;
    color: #FFFFFF;
    opacity: 0;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}


div.wrap-hover:hover .side-a {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
div.wrap-hover:hover .side-b {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

Any help would be much appreciated on this.

3 Answers

Try adding an explicit box-sizing property a few places to make sure every browser is measuring the sizes the same way.

Also, this is probably a typo, but div .wrap-hover needs to lose the space in it.

I ran it in JSFiddle like that and it looked good.

James Barnett
James Barnett
39,199 Points

+1 for using a code playground like JSFiddle

Laura Nielsen
Laura Nielsen
7,200 Points

Hi Stephen - Thank you for your response =)

I'm still not 100% achieving the look I would like. I didn't do the best job of describing what I wanted the div to look like.

If you run your JSFiddle in chrome and compare it to Firefox & IE, there still is a difference in the size of the box and how the content fits in it.

The visual look I am trying to create across all browsers, is the output I see in Firefox & IE.

Thanks again for your help, if you have any other ideas in mind I would love to hear them!

L

I looked again at the JSFiddle and it seems the -moz-border-box got stripped. When I inlined it, the display was identical to Chrome. Once you have them all displaying the same, it should be easy to change the sizing to what you need.

The updated JSFiddle is here.