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.

    SpaceCatMedia

    #34905

    Hi

    That’s half the battle πŸ™‚ , the buttons show but I need the menu to be fixed in the position.

    The menu scrolls with the page now, it there a work around for ie9?

    thanks

    j

    Mod

    Kenneth John Odle

    #34906

    Why are you messing about with the default Graphene style sheet? Graphene menus work just fine in IE9.

    Do NOT hack the theme files. Make all your changes via the theme settings or a child theme and you shouldn’t have any problemsÒ€”or at least, problems that are difficult to fix.

    SpaceCatMedia

    #34907

    Hi Kenneth,

    I just don’t know any better, I was following guidance from this forum.

    I will go and figure out how to install a child theme.

    the big question is… how do i create a fixed nav menu and have my dropdowns show in ie9 (that doesn’t seem to work with the default stylesheet)?

    Can this be done by using a child theme or will i face the same issues.

    sincere thanks for the help, I am on a clock here πŸ™‚

    cheers,

    j

    Mod

    Kenneth John Odle

    #34908
    Quote:
    how do i create a fixed nav menu and have my dropdowns show in ie9 (that doesn’t seem to work with the default stylesheet)?

    I run several sites with the latest version of Graphene and WordPress and all the menus show up just fine in IE9. It’s not WordPress, and it’s not the theme. Have you tried disabling your plugins to see if one of them is causing an issue?

    I would start with a clean install of Graphene and then use theme options or a child theme.

    Luko

    #34909

    Hy,

    Like I ( and Kenneth) said before, clean install of Graphene theme, install child theme, re size header properly (search this forum for a way how to re size it), current resizing is done wrong, every modification you made, do it through child theme don’t hack the core files, it’s wrong way trust me. Easy way is always the wrong way πŸ˜‰

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

You must be logged in to reply to this topic.