Having trouble with toggling z-index properties

Question

Can anybody recommend a good tool that could give the visual of my html page content stack when using z-index properties for some div tags on a given html document?

At present, I'm facing this troubling bug that is preventing me to navigate to other menu links on top navigation menu bar.

http://cms.tmadev.com.au/companyprovider.html

After spending sometime trouble shooting, I found out the reason the top menu navigation bar is 'disabled' due to the image logo.

<div class="logo">
    <img src="images/CRSlogo.png" alt="">
</div>

If you look into the html file closely, if you remove this div class logo, the top menu navigation bar links will be restored to normal.

Thus I'm suspecting because of its default z-index value (whatever it is), it's causing the image to go infront of the top menu navigation bar.

I tried hacking the CSS to push its z-index far back as -9999 - but it's not working! Links are still disabled.

Any ideas how I should handle z-index properties properly?

Cheers!

Answer 1

When I look at the example on which button clicked: "Administrator", I get the div "middle", it is therefore necessary to provide a stronger value to your "menu_tab" z-index: 2", and a lower to your "middle z-index: 1";

http://fr.html.net/tutorials/css/figure020.gif

Envoy !

Answer 2

So FireFox has a 3D view in its web inspector, here's a 3D view of the Google homepage:

To enable it:

1. Visit your web site
2. Open the dev tools (View > Toolbar > Web Development Toolbar)
3. Select the "Inspector" tab and select the 3D box third from the right on the same tab bar.

Answer 3

As a practice, try avoiding giving explicit height to elements

Heres the fix

HTML

<div class="header">
    .. some other content ...
</div>

CSS

.header {
    /*height:100px --avoiding height */
    overflow:hidden; /* one way to force element containing floated elements to have a height */
}

details about above overflow-hidden-float-trick here

although the above should work, if your navigation has some dropdowns, chances are, it will get chopped off because of overflow property of parent set to 'hidden'

a good way to clear floats would be to use something called a "clearfix" detailed here and there and everywhere

So,

HTML

<div class="header clearfix"> <!-- notice the new clearfix class -->
    .. some other content ...
</div>

CSS

.header {
    /*height:100px --avoiding height */
    /* overflow:hidden; --not required */
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
.clearfix {
    *zoom:1; /* for ie7 */
}

Answer 4

.header {height: 140px;} without z-index system

Varinder Say the true !