Off-canvas menu pushes all content / elements down ( underneath it ) in IE 6

HTML & CSS
1

Hello,
I am developing an off-canvas navigation that uses either CSS3 Transitions or jQuery to slide into view. However, in IE 6, when it slides in, it pushes all the other elements underneath it.

If one click on the list-icon in this page in IE 6, the result should be reproduced.

Can someone please help me understand what styling I can put in an IE conditional comment for IE 6 and less to prevent everything from being pushed under; and, just move to the left as occurs in all other browsers ?

Thanks in Advance,
Team 1504

2

This is not the answer you will be looking for per say but current browser statistics show that IE6 usage is around 6% around the world so IE7+ is what you should be looking at to support.

http://www.ie6countdown.com/

3

IE6 doesn’t understand position:fixed so try position:absolute instead (although of course it won’t remain fixed).


.main-nav {
    background: none repeat scroll 0 0 #3B3B3B;
    height: 100%;
    overflow: hidden;
    position:absolute;/* ie6*/
    position: fixed;/* everyone else*/
    top: 0;
    width: 0;
}

But as Chris said IE6 just isn’t worth the effort these days.

4

ah, okay. Thank you.

I do it ( code for Ie6 ) out of habit. but thank you for helping me anyway.