JSFiddle : http://jsfiddle.net/h7xvr2t9/2/
I have been experimenting with ways to achieve some effects:
- Animating a hidden DIV to slide into view from below a visible container
- Centering text/image on a link to trigger the animation
HTML
<div class="outer">
<div class="inner">
<a id="clickerthing" href="#" class="click">click</a>
<div class="hidden">
you can't see me until after the click...
</div>
</div>
</div>
CSS
div {
border: thin dashed black;
}
.outer {
float: left;
width: 235px;
background-color: red;
}
.inner {
text-align: center;
position: relative;
height: 200px;
overflow: hidden;
display: table;
width: 100%;
}
.click {
display: table-cell;
height: 100%;
width: 100%;
vertical-align: middle;
background-color: yellow;
}
.hidden {
position: absolute;
width: 100%;
height: 100%;
bottom: -200px;
left: 0px;
text-align: left;
background-color: #FFF;
transition: all 0.3s ease-in-out 0s;
}
.clicked {
bottom: 0;
}
The current code utilizes display: table and display: table-cell for proper content positioning in links and DIVs. However, Firefox and IE behave differently than Chrome/Safari. The hidden DIV is consistently visible in the former browsers while it remains hidden in Chrome/Safari, respecting the overflow: hidden CSS property.
My main query is: which browser interpretation is correct? I have not been able to find a definitive answer, as most responses only offer specific solutions that are not universally applicable.
Keep in mind...
I have observed that enclosing the container within another div hides elements as desired, but the reasoning behind this behavior is still unclear: http://jsfiddle.net/h7xvr2t9/3/