Grow your CSS skills. Land your dream job.

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

  • # March 6, 2013 at 9:23 am

    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”)

    # March 6, 2013 at 9:58 am

    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.

    # March 6, 2013 at 10:01 am

    Do you know of a good script link? @Subash

    # March 6, 2013 at 10:03 am

    You can use modernizr for feature detection.

    # March 6, 2013 at 10:20 am

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

    # March 6, 2013 at 10:32 am

    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?

    # March 6, 2013 at 10:40 am

    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

    # March 6, 2013 at 10:49 am

    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**.

    # March 6, 2013 at 11:00 am

    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.

    # March 6, 2013 at 11:05 am

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

    # March 6, 2013 at 11:06 am

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

    # March 6, 2013 at 11:08 am

    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.

    # March 6, 2013 at 11:09 am

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

    # March 6, 2013 at 11:12 am

    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.

    # March 6, 2013 at 11:15 am

    its working perfect in IE9 for me.

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".