I downloaded the 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
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.
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?
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.
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.
I'm going to try and put all the css in one file when I get done and IE10 is weird I wonder if I updated the modernizr file because the download came out before IE10. Do you think that might work? @paulie_d
Here is a link to the style sheet controlling the menu style.css as you can see this
-ms-backface-visibility:hidden;
is already in the css
.rm-container .rm-front,
.rm-container .rm-back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}@paulie_d
The only reason it is stacking is because I took the media query that put them stacking at 960px and changed it to 2000px until I can figure out what to do with it the folding problem. @paulie_d
I downloaded the 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
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.
Do you know of a good script link? @Subash
You can use modernizr for feature detection.
Thanks I'll see if I can figure it out. In the mean time if anybody else has any suggestions just post.
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?
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
Moderniser will add classes to your [body] element like .no-transform so you can do something like
That's why it's best to start with something that will work in older browsers and enhance.
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.
should work now @paulie_d big guns bbq.
Never mind it didn't work i messed something up i'll have to fix it at lunch.
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.
Ignore the last comment crazy me just forgot to save the file. @paulie_d
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.
its working perfect in IE9 for me.
Interesting...it doesn't in my IE10 but switching to IE9 standards they stack up...hmmmm
So why did it just all of a sudden start working? Was it because I added the modernizr? @paulie_d
Tthats weird?
stacking up is fine with me.
I don't have IE10 yet what does it do in that? @paulie_d
It probably doesn't matter but you should load your CSS sheets in a different order.
I would do something like
normalize.css
demo.css
style.css
in that order.
IE10
I'm going to try and put all the css in one file when I get done and IE10 is weird I wonder if I updated the modernizr file because the download came out before IE10. Do you think that might work? @paulie_d
OK....I think it's down to backface-visibility not being supported in IE without a pre-fix
You have
I think you might need to add
Worth a try
You might want to search for other instances as well.
Thanks I check it out.
Here is a link to the style sheet controlling the menu style.css as you can see this -ms-backface-visibility:hidden; is already in the css
.rm-container .rm-front, .rm-container .rm-back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }@paulie_dThen I don't know...
IE10 is now stacking as per IE9.
The only reason it is stacking is because I took the media query that put them stacking at 960px and changed it to 2000px until I can figure out what to do with it the folding problem. @paulie_d
Then that sounds like a media query issue rather than anything else.