Z-Index to overlay Content over my Slider


Ok here is my page…


As you will see I did a negative margin to the content div to move it up as I’d like it on the reflection of the image, it successfully moved up but how can I bring it to the front so its on top of the image.

I’ve tried using z-index but it didn’t appear to work for me.

Maybe I’m doing it incorrectly I’m sure its something small so if someone could please help me, I’d really appreciate it.

I gave my slider div a z-index of -1 and then the content appeared over it but none of the links worked on the slider div so that didnt work so I went back to what I have now which is where the slider is over the content-home div.

So what I need is the content-home div to show up overtop of part of the slider and the links to still work on the slider images and next and previous buttons.



Also, I just noticed in IE the images don’t show for some reason on the slider, any idea what may be causing this?

I’ve tried using z-index but it didn’t appear to work for me.
It didn’t work because only positioned elements can be given z-index.

Add position:relative; to #content-home and the current z-index value will take effect.

Excellent thank you my friend.

Any idea why the images don’t show up in IE but show up in all other browsers.

One other question would be in Chrome, the Navigation doesnt appear the same in all other browsers, it took Volunteer right off of the Navigation bar and seems to be different spacing in between stuff. Is there an easy way to fix this?



Any idea why the images don’t show up in IE but show up in all other browsers.
It’s working in IE8, I see what you are talking about in IE7 though. It looks like IE7 may be having trouble with the script, it looks like it’s not changing the #slider img from display:none; to display:block

One other question would be in Chrome, the Navigation doesnt appear the same
I’ll have to get back to you on that later

It looks fine in Chrome 4, I suspect you are using Chrome 5.
Chrome and Safari both use the Webkit engine so there must be a connection between the new versions of those browsers.

Thanks Rayzur,

Changing the slider img to display:block did work but for some reason only the images show, so the content on the slider “Test One” “Test Two” and also the arrows don’t show in IE7.

To answer the other question yes I am using Chrome 5.

As you said there must be a connection since both navigation and the inner pages are acting up in Chrome and Safari 5.

That was just a test for IE7, the #slider img needs to be set back to display:none; for the script to work right in all browsers.

I pulled your files down so I could make live edits for IE7. I’m still trying to debug it but the anchors are the problem in IE7. The images are nested in the anchors as you know and it is really the anchors that are not showing up in IE7.

Will post back if I can figure it out.

Oh ok, thanks so much for taking the time to check it please let me know if you figure it out, should I change the CSS slider img back to display:none, or just wait till I hear from you.

Much appreciated,


Yeah go ahead and set it back to “none”.

You might want to take this to the js forum and see if anyone there is familiar with any Nivo Slider IE bugs. I’m kinda stumped on it and I have not been able to connect it to any CSS problems. :confused:

Thanks Rayzur for attempting to help with the issue I’ll post it in the Javascript forum.

Have a had a chance to look at the Chrome 5 and Safari 5 issues?


I found the IE7 problem :smiley:

It is the single comma after your last function (in red)

Remove It

    <!-- Set up the Nivo Slider -->
    <script type="text/javascript">
    jQuery(window).load(function() {
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:false, //1,2,3...
            controlNavThumbs:false, //Use thumbnails for Control Nav
            keyboardNav:true, //Use left & right arrows
            pauseOnHover:true, //Stop animation while hovering
            manualAdvance:false, //Force manual transitions
            captionOpacity:0.8[B][COLOR=Red],[/COLOR][/B] //Universal caption opacity

Have a had a chance to look at the Chrome 5 and Safari 5 issues?

Haven’t had a chance yet. Let me update them and I will take a look.

Excellent that worked perfect! Thanks now, just trying to figure out this Safari 5 and Chrome 5 issue.

As far as your navbar dropping the last <li> text, I know what that is.
It is not happening on my chrome (by the way I did have version 5) because my default font is set at 16px arial.
I’ll bet you are using a different font and the characters are rendering larger.

You are depending on padding and text-size to set your widths, it can’t be done like that on a fixed width navbar.

Have a look through this recent thread where I explain how to fix it.

Simply put, you need to set up classes so you can set a defined width on each anchor and then remove the side paddings and use text-align:center.

Give this a try, it should take care of the problem.
You can fine tune the widths, I got them close but they are not pixel perfect to the borders in the image.

    #nav li {
        margin: 0;
    [COLOR=Blue]#nav li a [/COLOR]{
        float: left;
        text-decoration: none;
        color: #FFF;
[COLOR=Blue]        padding: 23px 0 18px;
        text-align: center;[/COLOR]
    #nav li a:visited{
[COLOR=Blue]    #nav a.home {width:118px;}
    #nav a.about {width:168px;}
    #nav a.news {width:162px;}
    #nav a.connect {width:144px}
    #nav a.contribute {width:168px}
    #nav a.volunteer {width:174px;}[/COLOR]

<div id="nav">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-4" class="menu-item menu-item-type-custom">
                [B]<a class="home"[/B] href="http://david-mitchell.ca/election">Home</a>
            <li id="menu-item-15" class="menu-item menu-item-type-post_type">
                [B]<a class="about"[/B] href="http://david-mitchell.ca/election/about/">Learn More</a>
            <li id="menu-item-16" class="menu-item menu-item-type-taxonomy">
                [B]<a class="news"[/B] href="http://david-mitchell.ca/election/category/newsroom/">Newsroom</a>
            <li id="menu-item-14" class="menu-item menu-item-type-post_type">
                [B]<a class="connect"[/B] href="http://david-mitchell.ca/election/connect/">Connect</a>
            <li id="menu-item-13" class="menu-item menu-item-type-post_type">
                [B]<a class="contribute"[/B] href="http://david-mitchell.ca/election/contribute/">Contribute</a>
            <li id="menu-item-12" class="menu-item menu-item-type-post_type">
                [B]<a class="volunteer"[/B] href="http://david-mitchell.ca/election/volunteer/">Volunteer</a>
<!-- nav --></div>

Thanks Rayzur only problem is I can’t give those links a class as it is called in from Wordpress.

Any other way around this issue?



Any luck finding a different way to achieve the nav issue?


^ Not really

You say you can’t style the anchors because of WP.

You do have some IDs’ on the <li> , is there anyway you can use them to assign the widths to?

If you could do that you would be able to float the <li> left and then set the anchors as display:block; with 100% width/height. That would give you specific widths and keep the entire anchor clickable. You would still use text-align: center though.

I really dislike WP, but I do understand why people use it when they need a CMS.

So if I just use the code you provided but with the IDs that Wordpress puts automatically, I should be able to achieve it to look correct?

Yeah if you can style the existing ID’s then there is no problem.
I am kinda confused by the number sequence though, 12-16 and then 4.

That would be because I believe the 12-16 are pages and 4 is a category.