@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.
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.
@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.
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.
div class="logo"> into the menu div. Give the menu div a staggering z-index with the logo and css-menu divs.
I have no idea if this is "bad css structure" but from what I understand about how IE reads z-indexes in older versions, it's the only way I can think of to make this work down the line.
I localized your code and tested it, and it definitely works for me. I'm afraid I can't see what else could be wrong wrong if you reverted your code to the original again, so then I won't be able to help.
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.
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?
Yes using z-index for the logo but it's not working in ie, only seems to work in chrome, safari and firefox :(
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.
Tried it but it doesn't seem to work
@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.
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 :(
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.
@kgscott284 @Watson90 @jkinney768 updated the z-index on the menu and the nivo div but still no luck.
@h22red What versions of IE? Just IE9?
Edit: It seems to work in IE8 and IE9
@ChristopherBurton are you sure I'm using an online render and ie9 and I can't see the logo go overtop.
Can anyone verify
In ie10 it works perfectly, but in ie 8/9 it wont bring the logo forward :(
In the source, right under the menu items, you have this:
It doesn't close though (meaning, there is no </a>). That may have something to do with why IE doesn't show it properly.
@senff added a closing tag but still does nothing
@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.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 stillposition: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.
I think you may need to rearrange this and put a
<
div class="logo"> into the menu div. Give the menu div a staggering z-index with the logo and css-menu divs.
I have no idea if this is "bad css structure" but from what I understand about how IE reads z-indexes in older versions, it's the only way I can think of to make this work down the line.
@Senff I copied the css you have provided and it still wont work
You sure? I don't see those changes on your site (in styles.css).
@Senff weird :/ ... I changed it though. I know someone had the same problem.
Well, can't see if it's fixed unless you update the code on the site....
@sneff try to check it again
@h22red My fault. I thought you were talking about your slideshow.
@sneff I just reverted back to the old code as that one isnt working :(
I localized your code and tested it, and it definitely works for me. I'm afraid I can't see what else could be wrong wrong if you reverted your code to the original again, so then I won't be able to help.
@Senff I will try it again, seems like the fatcow server is acting up. I'll post and update you tonight.