ie9 shows only shadows for nav subs

  • SpaceCatMedia


    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 :


    Prasanna SP


    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 –




    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.





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

    Do you have another suggestion?



    Prasanna SP


    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;

    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.



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





    You moved menu with this CSS:

    #header-menu-wrap {

    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.




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


    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 🙂



    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;



    width: 960px;


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

    Any other ideas?





    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.

Do NOT follow this link or you will be banned from the site!