5

I'm looking to do a fluid reponsive equal height column, with an 'overlay' on click.

To get the responsive equal height thing working, I've made the 'overlay' the actual base content (so it sizes the columns), and am attempting to then put the initial state in the overlay.

This works fine on FF and Chrome, but not IE10 or 11 (haven't tested earlier).

On IE, doing position: absolute; right: 0; left: 0; top: 0; bottom: 0 inside a TD doesn't seem to make the overlay cover the whole TD, rather just the size of the content inside it.

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

Any ideas?

Bonus Points: What my designer originally wanted was for the header to slide up, and the paragraphs to slide up from the bottom - don't really think this is possible without a lot of JS?

krustytoast
  • 51
  • 1
  • 1
    possible duplicate of [IE display: table-cell child ignores height: 100%](http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100) – isherwood May 01 '15 at 14:38
  • 1
    Have had a similar problem in older IEs with absolutely positioned elements not working correctly. Fixed by using 1px tiled image. Might be worth trying that instead of the rgba to see if that helps. – Antfish May 05 '15 at 15:48

1 Answers1

0

I've not checked your example in IE but I know there are serveral ways you could get this working on all browsers.

I always avoid before & after with layout as they have some cross browser issues, this may not be your current show stopper but either way before & after are not really for layout IMHO.

I did something similar a few months ago:

  1. [ [box,box,box] [overlay,overlay,overlay] ] : The two holders have position absolute, top & left = 0, the overlay holder z-index:1.

  2. [ [box,overlay] [box,overlay] [box,overlay] ] : The boxes are relative and the overlays are positioned absolute. All overlay dimensions are defined and given a z-index of 1.

The key is to keep it clean you really don't need more than 3 levels deep in this scenario you just need to position, and set the layers right.

Animating paragraphs would be clean, with jQuery but I'd prefer to us another animation lib like GSAP. But if you must natively and if you can afford to skip the animation with IE8 then you will basically set CSS3 transitions and use something like .classList to toggle the class http://jsfiddle.net/davidThomas/Tpz86/

function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
frontsideup
  • 2,833
  • 1
  • 21
  • 23