Grow your CSS skills. Land your dream job.

IE Bugs

  • # January 22, 2013 at 2:06 am

    I am having problems with my navigation and other components when looking into different IE version.
    In IE 9 and 7 the attributes of my menu completely disappear and the drop down shows behind a image slider. And I have also a problem with an image on the footer image.

    Is there anyone who can help/teach how to fix these IE bugs?

    Many Thanks

    # January 22, 2013 at 2:10 am

    By the way the url is http://www.migrationdownunder.com/md2/index.html

    # January 22, 2013 at 7:26 am

    Off hand I would say you have some issues in Chrome too. I can’t click on any of the submenu items because they disappear to quickly when I mouse-off the top level item. You might want to think about reducing the margin there.

    # January 22, 2013 at 7:33 am

    I think you might need to force IE to render in Standards Mode as (I think) it’s defaulting to Quirks.

    Add this to your head:

    # January 22, 2013 at 5:29 pm

    Paulie

    It didn’t work :( Im still facing the same issues

    # January 22, 2013 at 6:18 pm

    Dropdown behind slider bug is a z-index issue. Older IE browsers need the position:relative; z-index rule directly on the highest parent of the elements.

    So if the menu is in the header tag than the heder tag gets position:relative;z-index 90
    and the section tag which comes directly after the header tag which has the slider will get
    the position:relative;z-index:70

    The footer images problem is that the footer-top div is absolutelly positioned but you forgot to mention a left value.In ie this takes the auto value so the grass image will not start from the left. So you should set left:0 to .footer-top

    The menu could have a hasLayout problem, so you should try a zoom:1 rule on it, or on one of it;s parents. For testing purposes you could just write * {zoom:1}

    # January 31, 2013 at 5:10 am

    Hi Jozsef

    Thanks for your reply. Do you suggest another code for the menu area? You mentioned a has layout problem, so does it mean I should try something else?

    # January 31, 2013 at 5:11 am

    Maybe you have a link to a tutorial that I can achieve something similar.

    # January 31, 2013 at 5:38 am

    Sorry.I was mistaken.

    1st step:
    #header_inner { position:relative;z-index:90 }

    2nd step:
    You take out the z-index:50px from .nivo-slice that is located in the nivo-slider.css

    I’ve tried it this way, and it worked in IE7

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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