Grow your CSS skills. Land your dream job.

Why wont my site work in ie :(

  • # October 4, 2012 at 10:52 pm

    Hello :)

    For some reason my site looks perfect in Chrome and Safari, but in IE9 it looks horrible.

    here is the link: www (dot) wristreminderz (dot) com.

    Ive been trying to fix it for hours with no luck. Please help.

    # October 4, 2012 at 11:52 pm

    You can hyperlink on this site bud…lol, it isn’t youtube ;)

    Have you made sure to set a z-index for the elements that are overlapping the logo?

    # October 4, 2012 at 11:56 pm

    Yes using z-index for the logo but it’s not working in ie, only seems to work in chrome, safari and firefox :(

    # October 5, 2012 at 12:14 am

    I mean you need to set a z-index for the menu and the slider…one that is lower than that of the logo…it should force it to work.

    # October 5, 2012 at 12:28 am

    Tried it but it doesn’t seem to work

    # October 5, 2012 at 3:56 am

    @h22red – If you maybe give your logo a position of relative and then give it a z-index value higher than the jQuery slider, then it should definitly work as @kgscott284 stated.

    Judging by your code, maybe try and target the image inside the header tag and give that a z-index value.

    Hope you get it sorted, man.

    # October 5, 2012 at 7:40 am

    I did give it a high z index, as it work in chrome, Firefox, safari… You guys can check the source code on the site. It just won’t work :(

    # October 5, 2012 at 10:11 am

    Try giving the menu/slideshow a position:relative and lower z-index. It looks like nivo slider has position absolute, but no z-index. I think if you define a z-index to those other elements, it should work for you in IE.

    # October 5, 2012 at 12:08 pm

    @kgscott284 @Watson90 @jkinney768 updated the z-index on the menu and the nivo div but still no luck.

    # October 5, 2012 at 12:42 pm

    @h22red What versions of IE? Just IE9?

    Edit: It seems to work in IE8 and IE9

    # October 5, 2012 at 1:18 pm

    @ChristopherBurton are you sure I’m using an online render and ie9 and I can’t see the logo go overtop.

    Can anyone verify

    # October 5, 2012 at 1:45 pm

    In ie10 it works perfectly, but in ie 8/9 it wont bring the logo forward :(

    # October 5, 2012 at 2:00 pm

    @senff added a closing tag but still does nothing

    # October 5, 2012 at 2:07 pm

    @h22red right, it didn’t have anything to do with it, but I think I’ve figured it out now.

    First, you need to give the #header overflow:hidden;.
    Then, you need to remove the relative position and Z-index from the #header, and assign it to the IMAGE inside the header.

    #header {
    width: 500px; height: 100px; color: white; font-family: “Alegreya SC”, serif; font-size: 35pt; filter: dropshadow(color=#000000, offx=1, offy=1); text-shadow: 1px 1px 2px #000000;
    overflow:visible;
    }

    #header img {
    position: relative; z-index: 1000;
    }

    Explanation: the image is wrapped in #header — which has a height of 100px so it cuts off the bottom of the image. No matter what Z-index you give the #header, it will never show anything other than the top 100 pixels of the image.

    So, you need to give the #header overflow:hidden;, and it will show the rest of the image. But ah, it’ll still won’t show because there is still position:relative; on the #header — so that’s why you need to remove that.

    Then to make the image itself overlap the menu, you assign that relative positioning (and the Z-index) to the image.

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

You must be logged in to reply to this topic.

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