Drop-down menus won’t work in Internet Explorer 6 (twentyten theme)

Just found another flaw: avatars are floating over the text in comments (also in IE6).

Oh well, it’s a young theme after all.

In addition to the drop-down not working in IE6, I also see nav bar extending beyond the header image width.

I asked about IE6 support for twentyten at
https://2010dev.wordpress.com/2010/02/23/recent-developments/
in April.

The answer then was that there was no plan to support IE6. I respect that decision, but unfortunately it does mean I cant base new sites on 2010 child themes unless the customer is happy with it not working fully for IE6 visitors.

All right then. When I have time I will look into those issues myself.

In the meantime, thank you for noting this!

I was just playing with my site at work (which uses IE6), and I couldn’t figure out why my silly menus were not showing up the child pages. I was SURE I had it working the other night at home in Chrome. So I’ve just wasted about 45 minutes searching the forums for ideas on what I might have screwed up while I was coding other stuff. Turns out, I didn’t! ??

PW

It’s tricky to make them working in IE6, try to add zoom:1 to ul, li, or link inside it. And instead of display:none use left:-9000px and for hover use left:0.

I was able to fix the two minor problems relatively easy. Here is the code. Add this to style.css.

/* Begin IE6 hacks -------------------------------------- */
/* Fix header menu extending beyond the header image */
* html #access .menu-header, div.menu
{
	width: 928px;
}

/* Fix avatars floating over text in comments */
* html .commentlist .avatar
{
	left: -55px;
}
/* End IE6 hacks ---------------------------------------- */

Now what’s left is to fix the drop-down menus. It might take more time.

Hi Firelord

Thanks for sharing this.

I put your hack at the end in the style.css.
I did not work for me. I still see menu bar extending beyond the header image. Is there a particular place where I am supposed place this in the style.css file?

I am using twentyten theme.

never mind, I got it. Thanks again.

Ok, I got the menu working in IE6. And here’s the complete solution (it’s rather tricky).

First, you’ll need a special script hack, which can be obtained from here:

https://www.xs4all.nl/~peterned/csshover.html

Scroll down and download the HTC file csshover3.htc (version 3.11, minified or not — that’s for you to decide, still it’s a very small file).

Upload it to the theme’s directory. Actually, you can also upload it to the root of your WordPress installation – it doesn’t really matter as long as it is on the same server and shares the root URL — we will be using absolute URLs.

Second, if your server is Apache, create a new (or modify) a .htaccess file. This file should reside in the same directory as the HTC file. Add the following line:

AddType text/x-component .htc

Third, modify your style.css file. I recommend using a child theme — so that you don’t have to do this again and again with every WordPress update. Here’s what you should add to style.css (the above solutions for menu bar width fix etc. are included, as well as the menu font fix):

/* Begin IE6 hacks -------------------------------------- */
/* Fix header menu width extending beyond the image */
* html #access .menu-header, div.menu
{
	width: 928px;
}

/* Fix avatars floating over text in comments */
* html .commentlist .avatar
{
	left: -55px;
}

/* Fix menu font */
* html #access
{
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

/* Fix drop-down menu */
* html body
{
	behavior: url('https://your.site/path_to_wordpress/wp-content/themes/twentyten/csshover3.htc');
}

* html #access li:hover a,
* html #access ul ul:hover a
{
	color:#fff;
	background:#333;
}

* html #access ul li:hover ul
{
	display:block;
}

* html #access ul li:hover ul a
{
	color: #aaa;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a
{
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover
{
	color:#fff;
}
/* End IE6 hacks ---------------------------------------- */

The path to the HTC file IS VERY IMPORTANT! I’ve spent a lot of time trying to figure out how it works, and what ultimately worked was using absolute URLs.

All right, save and upload the style.css file and go to your web page in IE6 not forgetting to refresh the contents using CTRL+F5.

If you’ve done everything right, you should get 100% working menus in IE6 (that is it should behave exactly like in normal browsers). Also note that these hacks target only this specific browser (and also probably IE5.5, however let’s not go that deep…) and will not have any effect on FF/Opera/etc.

Please write back whether this solution worked for you.

Hi Firelord,

The hack works Brillantly!
Thanks for sharing it,
very much appreciated.

Great! Well, I guess the topic is now resolved then.

Firelord, IE6 is “still out there” because people don’t know they should upgrade. While I commend you for your patience, there’s no sense supporting IE6 unless it’s a government site you’re developing. The people out there who’re still using IE6 are the ones who need to be educated: still an upgrade link and maybe a “Read More” explanation for people who don’t know.

This monstrosity should’ve been wiped out; you’ve every right to put your foot down on anybody ignorant enough to still be using it in this day and age.

Firelord, I’m going to try your solution – thanks for sharing.

Alhadis – We all know that people running IE6 should upgrade, but often the end user is not ignorant and does want to use a better browser, but they are stuck with IE6 on a work computer due to an internal system requiring it & their IT policy means that their PC is locked down, so they cannot upgrade to a later IE or install a mozilla or webkit based browser.

The big problem is that if a developer is developing sites for a client, and the customers/potential customers of that client may be on IE6, then the client will insist that the site is tested and working on IE6.

Alhadis, take a look at this. This is what my StatPress plugin collected. It does seem like an argument for keeping IE6 support, doesn’t it? I do strongly agree that IE6 has got to go but not when ca 30% of your visitors are still using it.

Sadly I will have to sacrifice the ~3% using IE5/5.5. It’s just not worth it. That is when I saw how my blog looks in IE5.5, well… let’s say it wansn’t pretty. The Kubrick theme didn’t have those issues. But it is dated.

Firelord – I just tried your solution on a site I made using TwentyTen with a custom child theme.

It did indeed fix the issue and you can see the drop-down menu working in IE6 here: https://www.suttoncheamckd.co.uk

There are some unrelated IE6 display wrinkles, but I’ll look at these when I get time, probably when I move the IE6 fixes out of the style.css & into a separate IE6-only stylesheet. The original plan was only to test & fix for IE7 & up for this site, so I was happy to use TwentyTen as an excuse to have a go at making a child theme.

Thanks again for sharing your solution, it looks like a theme based on TwentyTen can now probably be safely used for any picky clients who have luddite customers!