I've spent close to two days trying to solve a z-index/stacking problem in IE7 and I've admitted defeat and I'm hoping one of you geniuses can help me out!
If you go to http://learningseat.wpdemo.com.au/discover/#links in IE7 and click on What We Stand For or Where We're Going you will see that the Who We Work With and Who We Are links show on top of my lightbox.
I've tried to solve this issue by moving things around, adding position: relative and z-indexes to different elements but I've had no success with this at all.
I even tried using some of the jQuery tricks for z-index issues with IE but I've had no luck.
I've worked with another developer on this project and the code isn't too pretty but if anyone could help me with this problem I'd be forever grateful!
Thanks for your ideas and help!
In this StackOverflow answer, Tgr gives a pretty good explanation of how z-index is supposed to work and how IE 7 and earlier get it wrong.
What worked for me in my limited tinkering was the solution presented in the last paragraph of that answer. First I removed the IE7-specific z-index values in your stylesheet, then I added a very high z-index value (9999) to the .buttoninfo that was clicked on. In your code, you can add a class when the button is clicked, then remove it when popup is hidden.
Related
I'm having issue with my drop-down menus on both windows and mac versions of chrome. I tried some fixes out there but I can't figure it out.
Any advice would be great! I think there is a z-index issue, but I can't figure out where it is.
Here is the temp site location: http://eyedialabs.ca/oaktreenew/about/
It's because an overflow. I realised this because if you gave the drop down top:-50px; we could see it, and given that the z-index you have given it is ridiculously high it was going to be the topmost element.
So, after much scouring, I found that it's header-container's overflow:hidden. Removing this attribute, fixes the problem.
http://www.triniscene.com/tsv7/caribbean/galleries/
Can anyone point out what is causing the page curl effect to NOT be visible. I'm wrecking my brain here and I'm just not figuring it out
Well I think I figured it out which was pretty weird imo. Originally I thought the issue lied within my css markup but after noticing how it worked in Fiddle and not on the website I did some more digging. turns out when you made the :after z-index:-1 the stacking order went behind the parent divs which I just realized was position:relative. giving the parent div a z-index fixed it.
Weird
It's quite early and so I'm probably missing something apparent here but I'd like to ask the community for some quick help. When you visit the demo page and hover over the slider, you'll see that the next and previous buttons appear as they should. Though the images have a "fold" effect on the left & right side and I'm trying to figure out why they're not showing.
I've toyed around with the z-index but can't figure it out. May someone please help with what should be a quick fix?
Thanks!
You have set overflow : hidden on your
<div class="pix_diapo diapostarted">
Since your folds are outside of the containing element, it hides it.
Just remove it, and it will work.
I've been smashing my head against a wall for about 3 hours now and guessing what's going on isn't working either. Can someone please help me rescue my waning sanity?
Basically in IE7 the second level on this menu just won't stay open when you try to hover over it. I've tried z-indexes, containers with position: relative set, line heights, borders, padding...everything!! What am I missing? ARgg!! Must be something obvious at a guess but my tired brain has just given in.
http://www.sah.org.au/devt/
Thanks for your help!
John.
That really is frustrating.
The only (almost there) solution I could find was to add a background-color to #menu a. You can change it to the correct colour on :hover for the different links. Or, just move it from li to a.
Weird, right? It massively helps.
I'm reasonably sure that a perfect solution is going to require (ugly) HTML changes, or writing jQuery to do the same thing (for only IE7).
Based on your comment on the code that says
/* using left instead of display to hide menus because display: none
isn't read by screen readers */
I found you don't want sub menus got read by screen reader. I did a research and found out most of the screen readers don't read the visibility:hidden elements. My suggestion to you is removing the left:-999em and replacing it with visibility:hidden and dsiplay:none together.
Here is the article about screen readers:
http://www.alistapart.com/articles/fir/
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org