Home › Forums › Graphene WordPress theme › Support

ie9 shows only shadows for nav subs

  • Anonymous

    January 9, 2013 at 12:51 am #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

    Anonymous

    January 9, 2013 at 4:43 am #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

    Anonymous

    January 9, 2013 at 1:00 pm #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

    Anonymous

    January 11, 2013 at 3:55 am #34898

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

    Do you have another suggestion?

    thanks

    j

    Anonymous

    January 11, 2013 at 2:06 pm #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.

    Anonymous

    January 11, 2013 at 2:20 pm #34900

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

    ie-no-buttons-show.jpg

    Anonymous

    January 11, 2013 at 5:35 pm #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

    January 12, 2013 at 1:36 pm #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 🙂

    Anonymous

    January 12, 2013 at 7:58 pm #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

    January 12, 2013 at 8:09 pm #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)

  • 1
  • 2
  • You must be logged in to reply to this topic.