Need help getting my superfish menu and slider working in IE6 and 7

HTML & CSS
1

Hey everyone

I have a customised version of a superfish dropdown menu and a nivo slider that is working fine in Safari, FF, Opera, Chrome and IE8.

however, it’s all going wrong in IE6 & 7…

I am getting script errors reported in those browsers and very significant issues. But I’m pretty sure css is causing the problem as I haven’t touched the scripts. The basic superfish works down to IE6 and Nivo slider to IE7 with some operation in IE6 but obviously my customisations have broken things in those browsers somewhere along the line…I’m pulling my hair out trying to figure out what.

Menus

In IE7 I get the dropdowns appearing but they disappear before I can roll over them.

In IE6 they are not appearing at all (or perhaps they are being hidden by the slideshow). I have tried some z-index trickery on this as described at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ but it doesn’t seem to be working…

Slideshow

slides are not showing at all in IE7 or 6.

I would like to get the slideshow working in 7 if possible and maybe have just a single static image for IE6 users if the slideshow is not possible

Can any of you browser compatibility wizards help me out with this one?

I have made a cut down set of files to illustrate the problem which can be seen here:
http://www.spiritlevel.co.uk/slidetest

my customised superfish css is here:
http://www.spiritlevel.co.uk/slidetest/css/superfish2.css

my customised nivo-slider css is here:
http://www.spiritlevel.co.uk/slidetest/css/nivo-slider.css

These are my initialisation scripts:

<script type=“text/javascript”>
// initialise plugins
$(document).ready(function() {
$(‘ul.sf-menu’).superfish({
delay: 800, // one second delay on mouseout
animation: {opacity:‘show’,height:‘show’}, // fade-in and slide-down animation
speed: ‘fast’, // faster animation speed
});
});
</script>

<script type=“text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:‘sliceDownLeft’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:300,
pauseTime:7000,
pauseOnHover:false, //Stop animation while hovering
});
});
</script>

Would really appreciate some help
thanks.

2

Hi,
There is something that needs to be fixed for all browsers with your menu. If js is disabled you are unable to reach the dropdowns in all browsers because of the top:59px rule you had on line 43. Make that top:auto instead of top:59px;

line #43


.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            [COLOR=Blue]auto;[/COLOR][COLOR=Red]  /*59px;[/COLOR] /* match top ul list item height */
    z-index:        999;
}

Now you can recover that spacing by adding some top padding to the sub UL and then reset the sub>sub Ul to zero top padding.

We will also fix the IE6/7 z-index bug by setting position:relative; and a z-index on the sub UL. I’ll highlight those below as well as the padding fixes for the dropdown.

At the top of your superfish css make these changes:


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
    font-size:12px;

}
.sf-menu {
    line-height:    1.0;
    [COLOR=Blue]position:        relative;
    z-index:        99;/*stack above slider div in IE6/7*/   [/COLOR]
}
[B].sf-menu ul [/B]{
    position:        absolute;
    top:            -999em;
    width:            12em; /* left offset of submenus need to match (see below) */
    [COLOR=Blue]padding-top:    32px;[/COLOR]
}
[B].sf-menu ul ul[/B]{[B] /* add this new selector*/[/B]
    [COLOR=Blue]padding-top:    0;[/COLOR]
}

Now there is a rule at the very bottom of that css file that is overriding the changes I just made. Remove the padding:0; from this selector

line #232

/*** puts the tint behind the dropdowns ***/

.sf-menu li ul, .sf-menu li ul ul {
    [COLOR=Black]background: #1D1E22 url('../images/drop_bg2.png') no-repeat 0 0;[/COLOR]
    [COLOR=Red]/*padding:0px; remove this*/[/COLOR]
    -moz-border-radius-topright: 0px; 
    -webkit-border-top-right-radius: 0px;
    box-shadow: 0px 0px 10px rgba(0,0,0, 0.4);
    -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);

}

I’m not sure what is going on with the slideshow in IE7 yet, haven’t had a chance to look at that.

3

wow Rayzur - thank you so much!

I had misinterpreted the sf menu markup which says /* match top ul list item height */ - and thought they meant “use this to adjust the top position of the sub ul to where you want it”. Of course, by doing this, I separated the sub ul box from the ul thus making the sub disappear when I tried to roll over it - whereas I should have left the top well alone and used padding instead thereby keeping the ul and sub ul connected as per your fix.

Re the z-index - I had added a z-index to the containing #nav item, but had not made it’s position relative…doh…and your method of adding it to the ul is better anyway.

I really appreciate you taking the time to help and fix this while I still have some hair left…

If you can shed any light on the slideshow issue it would be amazing - but you’ve already got my vote for the community award anyway!

thanks again.

4

HI,

You need to remove the two trailing commas in order to get IE to work properly.


<script type="text/javascript">
    // initialise plugins
          $(document).ready(function() { 
        $('ul.sf-menu').superfish({ 
            delay:       800,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
           [B] speed:       'fast'    [/B]                      // faster animation speed 
        }); 
    }); 
</script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'sliceDownLeft', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:300,
        pauseTime:7000,
        [B]pauseOnHover:false [/B] //Stop animation while hovering
    });
});
</script>

The last one in sequence should have no comma otherwise the browser expects something to follow.

5

Ah those pesky commas!

Thanks Paul - you too are a legend!

it’s even working (with a wipe rather than slices) in IE6.

Brilliant.

Cheers guys.

6

Ah - one small problem I didn’t notice with the menu fix before: because I removed the top: 59px and added padding to the top of the sub ul instead, the background of the sub ul is now covering up my the bottom half of my header background image when it appears - which although fairly subtle, is noticable because of the gradient and diagonal lines in the header.

Is there a way to get the the sub ul to appear from underneath the header as opposed to on top of it?

The z-index of .sf-menu is 99 so I tried giving my #header and/or #headerdiv position relative and a z-index of 100 but it hasn’t done the trick…

7

OK not getting anywhere with z-index here - I also realised that if my idea of giving the header a z-index of 100 had done anything, it would have made all of the nav dissappear behind the header…

the stacking order I want from bottom up is - slideshow, submenu, header bg image, main nav - not sure if that is possible or not.

I’ve been thinking about trying this another way: rather than have top:auto and increase padding on the sub-nav ul to push it down as Rayzur suggested, what about keeping the original top:59px; and giving the .sf-menu li items a height (top level nav only), that pushes their box down to meet the submenu ul…as the menus remain joined that should also work if js is off.

Any reason why this approach might be wrong?

8

the sub ul is now covering up my the bottom half of my header background image when it appears - which although fairly subtle, is noticable because of the gradient and diagonal lines in the header.
Hi,
I knew that might be a problem even though it is barely noticeable.

Is there a way to get the the sub ul to appear from underneath the header as opposed to on top of it?
No, that would not allow access to the anchors.
z-index on the header is not the way to fix this.

I think what you need to do is reduce the height of the BG image you are using on your anchors (currently 40px) and then set a 32px transparent border on the bottom of the first level anchors.

I would have to play around with it some more but something like this might work:

line #82


.sf-menu [B]li a[/B] {
    padding:         .65em 1em;
    [COLOR=Blue]border-bottom: 32px solid transparent;[/COLOR]
}

.sf-menu[B] li li a[/B] {
    padding:         1em 1em;
    font-size:11px;
    [COLOR=Blue]border-bottom:0 none;[/COLOR]
}

Of course you would need to remove the previous fix I suggested.

line #15

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            12em; /* left offset of submenus need to match (see below) */
    padding-top:    [COLOR=Blue]0;[/COLOR][COLOR=Red]/*32px*/[/COLOR]
}
.sf-menu ul ul{ /* add this new selector*/
    padding-top:    0;
}

EDIT:
I just cropped the height of top_down3.jpg to 28px and the transparent border will work then.

You may need to find the exact height but that approach does seem to work fine.

9

Hi,

If you increase the height of the a element so that it pushes the nested ul downwards then yes you can remove the top padding from the ul because it will still be in contact with the parent.

You will however then need to nest an inner element in the top level element onto which you can apply that rounded background otherwise the anchors background will stretch in the same place that the ul was and you will be no better off.

10

I was going to suggest transparent borders also to make space but Ie6 will draw them as solid :).

11

I forgot about IE6 doing that. :blush:

I guess you could allow IE6 to have it’s way with the border or add an extra element to the anchor as you mentioned above. Those seem to be the only two ways of doing it.

12

Ahhh - fix one thing and another thing breaks…more hair loss! :slight_smile:

Ok, so first I tried simply adding a height of 43px to .sf-menu li a (having put submenu top back to 59px)

This keeps the menus connected but…

  1. In all browsers, the anchor height is inherited by the child anchors (ie in the submenus) I guess to fix this I would have to put a fixed height eg 25px ish on .sf-menu li li a right? currently these submenu anchors have no height as it is just made up of padding around the text. Is there anyway to stop the child anchors inheriting this height without giving them a fixed pixel height?

  2. More importantly, although things look OK in IE7, look what happens in IE6! all my main nav items are now stacked on top of each other…and have lost some of their styling (width and arrows etc)

http://www.spiritlevel.co.uk/slidetest/

So instead of just adding the height to sf-menu li a, I decided to try giving that anchor a separate class - sf-menu li a.tag, and gave that a height of 43px (which at least stops the inheritance). I have applied this class to the main menu “Company” and “Partners” anchors and you can see this causes the same problem of stacking in IE 6 and the loss of styles

http://www.spiritlevel.co.uk/slidetest/index2.html

I’m afraid I haven’t even got on to trying to fix the background image by adding an extra element yet…would you mind explaining a little more about that as I’m not sure that I completely understand? If I wrap the anchor in say a div and apply the bg image and rounded corners to that then won’t the div just expand to the height of the anchor anyway?

thanks again for all your help on this guys, I really do appreciate it.

13

Hi,

You can negate the height in the nested menu by using height:auto. IE6 needs the top level floated if you are setting it to display:block because an element with haslayout will stretch the parent float to 100% wide.


.sf-menu li a {
    padding:         .65em 1em;
[B]    height: 43px;
    float:left;[/B]
}
.sf-menu li li a {
    padding:1em 1em;
    font-size:11px;
[B]    height:auto;
    float:none;[/B]
}

For the top level use an inner element inside the anchor and not around it. As the js is adding a span then use another element such as strong or a b instead.

e.g.


            <ul class="sf-menu">
                <li class="nav_news"> <a href="#">[B]<b>News</b>[/B]</a>

Now just apply the background to that b element in the same way that you were originally doing fro the anchor.

14

Thanks Paul! that does the trick - you have been so helpful, I don’t know what I would have done without you.

I spent 3 days before posting here trying to figure out why the menu and slideshow weren’t working in IE6 & 7 and it was all because of those 2 commas that IE took exception to… Microsoft certainly have a lot to answer for!

thanks again both of you.