Overlay 100% TD coverage in IE

Question

I am looking to make a liquid mating column of the same height with “overlay” on click.

In order to get efficient work with equal height, I made an “overlay” of the actual base content (so it changes the columns), and I try to then put the original state in the overlay.

This works fine on FF and Chrome, but not on IE10 or 11 (not previously tested).

In IE, making position: absolute; right: 0; left: 0; top: 0; bottom: 0 position: absolute; right: 0; left: 0; top: 0; bottom: 0 position: absolute; right: 0; left: 0; top: 0; bottom: 0 inside a TD does not seem to make the overlay close the entire TD, not just the size of the contents inside it.

http://codepen.io/anon/pen/dooJjb

Any ideas?

Bonus points: Initially, my designer wanted the headline to slide up and the paragraphs to move down - don't you really think this is possible without a lot of JS?

Answer 1

I have not tested your example in IE, but I know there are server-side ways you could make this work in all browsers.

I always avoid before and after with the layout, since they have problems with the cross browser, it may not be your current stop show, but in any case, the before and after is not really for placing IMHO.

I did something similar a few months ago:

• [[box, box, box] [overlay, overlay, overlay]]: two holders have an absolute position, top and left = 0, overlay z-index holder: 1.

• [[box, overlay] [box, overlay] [box, overlay]]: the fields are relative and the overlays are absolute. All overlay sizes are defined and defined by z-index 1.

The key is to keep it clean, you really don't need more than three levels in this scenario, you just need to place and set the layers correctly.

Animated paragraphs will be clean with jQuery, but I would prefer a different animation library like GSAP. But if you must initially, and if you can afford to skip the animation using IE8, then you basically set CSS3 transitions and use something like .classList to switch the class http://jsfiddle.net/davidThomas/Tpz86/

 function classToggle() { this.classList.toggle('class1'); this.classList.toggle('class2'); } document.querySelector('#div').addEventListener('click', classToggle);