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.

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.

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:

http://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('http://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.

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