WordPress with IE6 and a Suckerfish dropdown-menu

[sem90]

I’ve been trying to make a new website for a friend of mine. It’s a really basic site however he is really happy.

[b:2c05zu2x]Problem:[/b:2c05zu2x]
Today I noticed a problem: when I open the site in IE6, the menu doesn’t work: there is no hovering, and there is no dropping down. (the item "koffiebekersconcept" has subitems)

Data:
Link to the site: http://www.dekoffiebeker.nl[/url:2c05zu2x%5D
[i:2c05zu2x]Wordpress version:[/i:2c05zu2x] 2.8.6
[i:2c05zu2x]Wordpress plugins:[/i:2c05zu2x] Contactform7, T.MCEadvanced, TS Custom Widgets
[i:2c05zu2x]Wordpress theme:[/i:2c05zu2x] Big City (modified)

The theme I used did not have a dropdown-menu. I inserted one using the CSS generated by the "Dropdown menu CSS generator". (code is below)
I did not want to manually enter all menu items, so this is the code I placed in the header.php file.:
[code:2c05zu2x] <ul id="suckerfishnav">
        <li class="<?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php bloginfo(‘url’); ?>">Home</a></li>
        <?php wp_list_pages(‘title_li=&depth=0&sort_column=menu_order’); ?> </ul> [/code:2c05zu2x]
After I placed this code everything seemed to work perfect in most browsers, except for IE6.

[b:2c05zu2x]What I tried to fix this problem:[/b:2c05zu2x]
-I installed the suckerfish_ie.js file, which I found on the same page as the CSS generator.
I used the following code:
[code:2c05zu2x]<script type="text/javascript" src="suckerfish_ie.js"></script>[/code:2c05zu2x]

-I installed the WordPress Suckerfish plugin, for IE6. I had to change all ID’s to something like .sfmenu, but this made my menu disappear.

-I scrolled across this forum for approx. 60 minutes, but I could not find a similiar situation.

[b:2c05zu2x]CSS and things I changed:[/b:2c05zu2x]
First of all, this is where you can find my CSS-file:
http://www.dekoffiebeker.nl/wp-content/themes/big-city/style.css%5B/url:2c05zu2x%5D
You can find the menu at #suckerfishnav, on the bottom.

[i:2c05zu2x]What did I change in the CSS and stuff?[/i:2c05zu2x]
-I added the menu in a layer, with the following code:
[code:2c05zu2x]position:relative; z-index: 5;[/code:2c05zu2x]
This was due to the fact that the sidebar blocked a part of the menu. (like the menu was visible, but the div of the sidebar was blocking interaction)
The code I used for the sidebar is the following:
[code:2c05zu2x]position:relative; z-index: 1; [/code:2c05zu2x]
-I made the original "NAV" elements hidden;
-I also changed some graphics files in the header, but these did not have anything to do with the menu.

[b:2c05zu2x] Latest info[/b:2c05zu2x]
Well, I hope I informed you clearly what my problem is. I’m not an expert at coding, however I really tried hard to find a possible cause.
Hopefully one of you can point me in the right direction.

Thanks in advance!

[imported_Ryan]

&quot;sem90&quot; wrote:

I inserted one using the CSS generated by the "Dropdown menu CSS generator". (code is below)
I did not want to manually enter all menu items, so this is the code I placed in the header.php file.:
[code:1ietl6q2] <ul id="suckerfishnav">
        <li class="<?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php bloginfo(‘url’); ?>">Home</a></li>
        <?php wp_list_pages(‘title_li=&depth=0&sort_column=menu_order’); ?> </ul> [/code:1ietl6q2]
After I placed this code everything seemed to work perfect in most browsers, except for IE6.

Cool ” title=”Smiley” /> Most people around here just use one of our plugins. Nice to see someone taking the old school approach for once!

[quote:1ietl6q2][b:1ietl6q2]What I tried to fix this problem:[/b:1ietl6q2]
-I installed the suckerfish_ie.js file, which I found on the same page as the CSS generator.
I used the following code:
[code:1ietl6q2]<script type="text/javascript" src="suckerfish_ie.js"></script>[/code:1ietl6q2][/quote:1ietl6q2]

Yep, that should work as long as you aren’t using one of our plugins.

[quote:1ietl6q2]-I installed the WordPress Suckerfish plugin, for IE6. I had to change all ID’s to something like .sfmenu, but this made my menu disappear.[/quote:1ietl6q2]

No. You needed to add a class of .sf-menu to the UL tag.

…

EDIT: Darn. I think I can see the problem here. I suspect I have made an error on the page you were reading – or more to the point, changed the suckerfish_ie.js file but never changed the instructions on how to use it. I’ll be back shortly once I check a few things out.

[imported_Ryan]

Actually, my instructions look fine from what I can see. The only problem was that I forgot to update the suckerfish_ie.js file to one which allows the script to be used for more than one menu per page. But the unordered list code I posted on that page should have worked anyway.

Here’s updated instructions (including a new suckerfish_ie.js script). Perhaps try these and hopefully they will work out for you:
https://geek.hellyer.kiwi/products/suckerfish_css/

I might write up a blog post outlining how this all works and why things are done the way they are, what the difference between Superfish and Suckerfish is etc. etc. This might be useful to a lot of theme developers too as many of them have slightly screwball dropdown menu code and they don’t realise it.

[b:3kkz1s10]Handy tip:[/b:3kkz1s10] Don’t use the sf-menu class to style your menu. I recommend only using that to add extra functionality such as the hover support in IE, Superfish type features etc. By styling via another class or an ID you can make sure that you are able to use various scripts for multiple menus (or anything else that requires functionality added via the sf-menu class) on the same page without messing up each others styling. This is a common bug/feature in WordPress themes which use the Superfish jQuery plugin.

[imported_Ryan]

I’m heading home from my office to meet with various people over the next hour or so. I’m bound to have time between meetings so I’ll try to write up a blog post during that time for you.

That CSS generator page is badly need of a cleanup/rewrite so getting some of those instructions off onto a separate blog post/page would be a good step to achieving that, and since you sound like you might find the post helpful this is a perfect time to do it.

If I don’t post back here within the next 24 hours, flick me an email on my contact form to bug me about it as I probably got sidetracked and forgot … https://geek.hellyer.kiwi/contact/

[imported_Ryan]

Blog post is now written:
https://geek.hellyer.kiwi/ie-hovers/

I have a few follow up posts to that one which I’m working on at the moment too. Once they’re completed I’ll rewrite the CSS generator page with links back to those posts to get the clutter out of the way.

[sem90]

&quot;Ryan&quot; wrote:

That CSS generator page is badly need of a cleanup/rewrite so getting some of those instructions off onto a separate blog post/page would be a good step to achieving that, and since you sound like you might find the post helpful this is a perfect time to do it.

First of all thanks for the quick and usefull response! After having read your post I reuploaded the script en guess what: it works partly now!

The :hover functions do work, as you can check at the site:
http://www.dekoffiebeker.nl/%5B/url:1xevvkeb%5D

Nevertheless it seems like the CSS is a kind of messed-up. You can find my CSS file at http://www.dekoffiebeker.nl/wp-content/themes/big-city/style.css%5B/url:1xevvkeb%5D
I cannot really find something that could be messed up, however I might have forgot something? (even though I used the generator)

Thanks in advance!

[imported_Ryan]

What is specifically wrong with the menu? It appears to be working fine for me in Chrome.

[sem90]

Woops, I’m sorry for my late response this time.

Well, in Chrome nothing was ever wrong. The problem only occurs when using IE6 ( >).
At my current progress, after reinstalling the javascript, the dropdown effects work, however it seems that the CSS is incorrect.
The strange thing is that this does not occur in Chrome…

What’s wrong in IE6?
If you go to http://www.dekoffiebeker.nl/%5B/url:13ocseus%5D , in IE6, and hover with your mouse over menu items "koffiebekerconcept", a menu drops down.
The problem however is that all colours seem messed up, even though the CSS is correct. (at least: it works in Chrome)

An image to clarify my problem:
[img width=480 height=159]http://www.dekoffiebeker.nl/css_problem.JPG[/img]

Thanks and have a good weekend!

[imported_Ryan]

No idea sorry. I’d need to dig fairly deep into the code to figure out what’s wrong there I think. I do this type of work as part of our Premium Support option … https://geek.hellyer.kiwi/services/premium-support/

[Author]

Posts