Help with some css problems and browser support!!!!

[chanman]

I downloaded the [3d menu concept](http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/ “3d menu concept”) from codrops.com and am almost done with the website for the client and don’t know what to do about the IE browser support for that code. It seems to work great in everything else but because of the transitions it doesn’t in IE. Could someone please help me? And I don’t mind having to change whatever I need to to get the menu to work I just want to try and keep the same general design even if the pages have to go side by side.
website: [Big Guns BBQ](http://biggunsbarbq.com/menu/ “big guns”)

[Subash]

The concept you are using requires the browser to support css 3d transforms.
Because ie<9 doesn't support those properties it won't work. You can provide fallback menu for old browser by using browser detection scripts.

[chanman]

Do you know of a good script link? @Subash

[Subash]

You can use modernizr for feature detection.

[chanman]

Thanks I’ll see if I can figure it out. In the mean time if anybody else has any suggestions just post.

[Paulie_D]

I suppose one could reverse engineer a way for this to work in IE **BUT** the best option would have been to design for IE first and then enhance for the browsers that support the transitions/transforms you want.

Could you put the basics of the ‘menu’ etc into Codepen for us to work with?

[chanman]

I went to put the file in my js folder and there is already a modernizr file in it so can you tell me how to actually use it? @subash

[Paulie_D]

Moderniser will add classes to your [body] element like .no-transform so you can do something like

.no-transform #myelement {
some property;
}

That’s why it’s best to start with something that will work in older browsers and **enhance**.

[Paulie_D]

Site link is borked at the moment but IIRC, you had some overflow issues so you might want to consider increasing the height of the divs or implementing an equal-heights javascript solution.

Not only that but the JS will have to be refactored so do something different in IE.

[chanman]

should work now @paulie_d [big guns bbq](http://www.biggunsbarbq.com/menu/ “”).

[chanman]

Never mind it didn’t work i messed something up i’ll have to fix it at lunch.

[Paulie_D]

What I am trying to say is that you started with something that you KNEW wouldn’t work in IE and are trying to work backwards.

It will take a LOT of work to refactor everything to get it to work in IE. It’s not something I would want to do except as an intellectual exercise.

[chanman]

Ignore the last comment crazy me just forgot to save the file. @paulie_d

[chanman]

I realize I started backwards now, but i have to figure out a way even if it’s just putting the divs beside each other. and having a whole separate css file for IE.

[chanman]

its working perfect in IE9 for me.

[Author]

Posts