Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Laura Nielsen
Laura Nielsen
7,200 Points
Posted by 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

Stephen Crockett
Stephen Crockett
18,614 Points
Stephen Crockett
Stephen Crockett
18,614 Points

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
James Barnett
James Barnett
39,199 Points

+1 for using a code playground like JSFiddle

Laura Nielsen
Laura Nielsen
7,200 Points
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

Stephen Crockett
Stephen Crockett
18,614 Points
Stephen Crockett
Stephen Crockett
18,614 Points

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.