The problem:
When using an inline layout, the menu drop-downs disappear behind other items that come further down the page and hence higher in stacking order number. The default z-index for the CSS menu box is 1, and I’ve tried changing it to a higher number, which it appears to take, but to no avail.
I’ve seen this problem come up before, and have tried changing the z-index of the box that gets in the way below the menu (‘Intro-Box’) to 0, as has been suggested in a post made by someone else previously. To no avail also.
Are there any ways around this problem?
The drop-down is from the ‘What we do’ button on the menu.
you have an html box named “Header-Box-Centre-Float” whose overflow is set
to auto. Change the overflow to visible, and that will your menu problems.
–
Ernie Simpson
On Sun, Aug 26, 2012 at 12:13 PM, Ian Halstead email@hidden wrote:
The problem:
When using an inline layout, the menu drop-downs disappear behind other
items that come further down the page and hence higher in stacking order
number. The default z-index for the CSS menu box is 1, and I’ve tried
changing it to a higher number, which it appears to take, but to no avail.
I’ve seen this problem come up before, and have tried changing the z-index
of the box that gets in the way below the menu (‘Intro-Box’) to 0, as has
been suggested in a post made by someone else previously. To no avail also.
Are there any ways around this problem?
The drop-down is from the ‘What we do’ button on the menu.
Ah yes… fantastic. So used to placing the overflow on auto for boxes that stretch the full width of the browser window, that I’d got a bit overenthusiastic and done it on this one as well.
Just realised that when using the compatibility mode on IE10 (W8 consumer preview), the CSS menus drop behind the box below again. Using the normal rendering mode, it’s fine.
It’s not clear in which versions of IE the ‘compatibility mode’ attempts to render. IE7 or IE8, both or some other?
Is there a way round this, given that it is a pharmacy website and may be visited by some out of date operating systems and browsers?
Hi Ian,
You can try and specify the compatibility mode in the page using the Microsoft proprietary meta tag. Hopefully it would overwrite the user’s compatibility mode setting but you would need to test this.
If this all looks like a massive pain in the (whatever) then you are pretty much on track. IE 10 has 6 rendering modes where you can instruct the browser to use one of it’s 3 rendering engines to show the page in various configurations.
Try out a few of these meta tags and see if any force the browser to render your menu as intended. Oh, and please report back so we can copy your hard work!
Regards,
Tim.
On 7 Sep 2012, at 10:40, Ian Halstead wrote:
Just realised that when using the compatibility mode on IE10 (W8 consumer preview), the CSS menus drop behind the box below again. Using the normal rendering mode, it’s fine.
I’m not sure if this will help in this instance, but I have found
sometimes in inline layouts where I am am having z-index layering
problems, setting the z-index value to auto for the div that contains
the one I’m trying to raise (or drop) helps.
I share your temptation, Ian. And here I thought the browser-makers
were finally starting to play nice. :-/
–
Ernie Simpson
On Fri, Sep 7, 2012 at 5:40 AM, Ian Halstead email@hidden wrote:
Just realised that when using the compatibility mode on IE10 (W8 consumer preview), the CSS menus drop behind the box below again. Using the normal rendering mode, it’s fine.
It’s not clear in which versions of IE the ‘compatibility mode’ attempts to render. IE7 or IE8, both or some other?
Is there a way round this, given that it is a pharmacy website and may be visited by some out of date operating systems and browsers?
I’m tempted to just leave it I must say!
