ie9 shows only shadows for nav subs

  • SpaceCatMedia

    #6574

    Could anyone assist, the theme works beautiful in all browsers but only shadows show in my ie9. I thought it was the z-index but i can’t figure it out. My site is : http://www.canopyinsurance.com

    thanks

    Prasanna SP

    #34896

    Because IE 8 and older versions does not support CSS3. You have to use -ms-filter or filter to simulate the box-shadow in legacy browsers.

    This may help you – http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

    YMMV

    SpaceCatMedia

    #34897

    Thanks Prasanna. The issue is the buttons are invisible in ie9 which supports CSS3 (I thought ) and only the shadow is showing, no buttons.

    I can live without the shadow if I could only get the buttons.

    thanks

    Jamie

    SpaceCatMedia

    #34898

    HI, I have tried what you suggested but it seems to be a different issue. 🙁

    Do you have another suggestion?

    thanks

    j

    Prasanna SP

    #34899

    You can change drop down menu style for IE 9 only using IE 9 only CSS

    <!--[if lt IE 9]>
    <style type="text/css">
    #header-menu ul li:hover > a {
    background: #123456 !important;
    display: block !important;
    z-index: 17 !important;
    }
    </style>
    <![endif]-->

    Something like that. But you need to find out the cause of this issue. I can’t see the issue in your site since I don’t have IE 9. Any screenshot would be helpful.

    SpaceCatMedia

    #34900

    Ok here is a screen shot, you can see the buttons aren’t there but the shadow is:

    ie-no-buttons-show.jpg

    Luko

    #34901

    Hy,

    You moved menu with this CSS:

    #header-menu-wrap {
    position:fixed;
    top:116px;
    }

    Disable or delete position:fixed, because IE doesn’t love it 😉 And try to move navigation somehow else. In fact, you don’t have to move #nav division, resize header properly to match your header image, so navigation will follow 🙂

    At first, installing child theme would be wise.

    thenortheasthub

    #34902

    Hi,

    I have resolved the problem by

    1. Going into the style.css of the graphene theme

    2. Finding the below code (starting on line 601), deleted the word ‘relative’, saved the file.

    /* Top level header menu, default state */

    #header-menu-wrap{

    position: relative;

    background: url(images/sprite_h.png) left -3px repeat-x #101010;

    z-index: 15;

    3. Cleared my cache

    4. Dropdown menu visible again on internet explorer 🙂

    SpaceCatMedia

    #34903

    Hi thenortheasthub

    I did what you said removed ‘fixed’ and added ‘relative’ and all it did was move the position of the menu and the menu didn’t show, I even cleared my cache.

    I had it set this way to have the menu fixed at the top:

    #header-menu-wrap {

    background: url(images/sprite_h.png) left -4px repeat-x #101010;

    position: fixed;

    top:116px;

    z-index:1;

    width: 960px;

    }

    The menu does not show the drop down buttons at all in ie9.

    Any other ideas?

    tx

    j

    thenortheasthub

    #34904

    Dont add relative, just delete the word fixed so you have

    position: ;

    Let me know if it works.

Viewing 10 posts - 1 through 10 (of 20 total)

You must be logged in to reply to this topic.