WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Drop-down menus won't work in Internet Explorer 6 (twentyten theme) (45 posts)

  1. Firelord
    Member
    Posted 4 years ago #

    Drop-down menu does not work in IE6. That's a very disappointing discovery, I must say. I like this theme very much.

    Unfortunately statistics show that IE6 is still out there and a lot of people are still using it. Otherwise I wouldn't bother.

  2. Firelord
    Member
    Posted 4 years ago #

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

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

  3. Tara
    Member
    Posted 4 years ago #

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

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 4 years ago #

    I asked about IE6 support for twentyten at
    http://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.

  5. Firelord
    Member
    Posted 4 years ago #

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

  6. PolyWogg
    Member
    Posted 4 years ago #

    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

  7. Izvarinskij
    Member
    Posted 4 years ago #

    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.

  8. Firelord
    Member
    Posted 4 years ago #

    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.

  9. Tara
    Member
    Posted 4 years ago #

    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.

  10. Firelord
    Member
    Posted 4 years ago #

    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.

  11. Tara
    Member
    Posted 4 years ago #

    Hi Firelord,

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

  12. Firelord
    Member
    Posted 4 years ago #

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

  13. alhadis
    Member
    Posted 4 years ago #

    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.

  14. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 4 years ago #

    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.

  15. Firelord
    Member
    Posted 4 years ago #

    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.

  16. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 4 years ago #

    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: http://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!

  17. alhadis
    Member
    Posted 4 years ago #

    Interesting. These stats are collected from a Ukrainian audience, aren't they?

    "That is when I saw how my blog looks in IE5.5, well..."
    Interesting you should say that, because tests conducted in the west showed only 6% of people used IE6, and nobody was using IE5.5 (thankfully). It might be that things are that different in Eastern Europe.

    But, be realistic: there's a whole audience of people out there who could likely be coerced to upgrade their browsers if you but provide them a message to do so. That's what you've been doing so, I hope? It doesn't matter if the message is blatant and in-your-face, or small and subtle, the thing is, these people need to know they can't just sit around in the putrid dark ages.

  18. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 4 years ago #

    Alhadis you seem to be missing the point of this thread which is that some people need to support IE6. No one supports IE6 for fun. I hate it as much as you do and I wish it would die, but if customers insist on supporting it, you can only

    1. Spend valuable time fixing it and absorb it into the fixed project cost
    2. Quote an additional charge for the extra work & give them the option
    3. Refuse to do it and possibly lose the job.

    If you have a hobby site and are happy to tell the small amount of IE6 visitors to go away, then that is fine, However if the target audience is businesses and that business is still standardized on IE6, the IT dept don't give a monkey's whether some random site looks OK or not. Their IE6 only policy could be due to inertia, laziness, or a desire to restrict personal browsing by employees (by making the web ugly). As long as their employees can use their legacy internal systems which may have been built to work in IE6 and would cost money to make work in proper browsers, then putting a banner onscreen to tell them that their browser sucks isn't going to make an ounce of difference.

    I'm not sticking up for IE6, just understanding why some people still have to use it.

    Here are the stats I'm seeing for a medical site in London, UK with a local non-business audience, but where people may be visiting from their workplace:

    Firefox 3 47.8%
    Internet Explorer 8 15.3%
    Internet Explorer 6 15.2%
    Internet Explorer 7 8.9%
    Google Chrome 7.7%
    Safari 4.2%
    Internet Explorer 5 0.5%
    Opera 0.4%

    I don't think my client would be happy telling 15% of the people that visit that they cannot make an appointment because their browser is cr@p

  19. alhadis
    Member
    Posted 4 years ago #

    "I don't think my client would be happy telling 15% of the people that visit that they cannot make an appointment because their browser is cr@p"

    I've explained this situation pretty thoroughly with clients, and they're mostly willing to have a modest "please upgrade" message on their site for users of older browsers, provided the rest of the site is workable.

    Now, don't get me wrong. I'm not saying leave it garbled for idiot and/or incarcerated IE6 users to stumble through (even if that's how I'd prefer to leave my personal site). But my approach would be to have more complicated functionality like dropdown menus cut off from older browsers altogether, and just leave the remaining subnavigation accessible in a sidebar in the related subpages (naturally this is going to depend on the design, but I've always found gracefully degrading pages to be more helpful than trying to accommodate for IE6 users).

    Premise is simple: Somebody wants to continue using an older, crappier browser? Fine. Here's the site, it's functional, but I've no incentive to make it pretty for you. You want the luxury of having a beautiful Internet, then it isn't going to be served to you on a silver platter anymore.

  20. Firelord
    Member
    Posted 4 years ago #

    Whatever. Bottom line is that support for IE6 was achieved (hopefully this solution will work for most people).

  21. Tara
    Member
    Posted 4 years ago #

    Whatever. Bottom line is that support for IE6 was achieved (hopefully this solution will work for most people).

    I second it.

    Also, Firelord, your efforts and the spirit of sharing are very much appreciated.

  22. Firelord
    Member
    Posted 4 years ago #

    Dang. Make that partially achieved. Found a flaw with the current solution. Try nesting multiple pages. Although the menus still work, the end result is quite different from menu behavior in normal browsers.

    Thus the topic switches back to unresolved until someone proposes a better solution. It's mostly about tweaking the CSS, really. The main problem is that IE6 doesn't support the ">" selector.

    I myself will probably be using only the parent page → child page formula (2 levels max), so I will not consider the job of perfecting the solution my top priority.

  23. Can you adapt something Stu Nicholls pure CSS menu that supports IE6? Stu Nicholls | CSSplay | Validating drop down cross-browser menu

  24. Firelord
    Member
    Posted 4 years ago #

    songdogtech, looks good. But I think adapting it would require messing with the script that generates the menu (to add the necessary classes to anchor elements and such). Currently I'm trying to achieve a pure CSS solution which would not require any changes in the theme code.

    So here's an updated solution that fixes the nesting problem entirely for the first five page levels. Yes, I realize that the code is getting bigger and bigger and it isn't elegant (I gather nothing is elegant with IE6), and it's all because of the unsupported ">" selector and no good means of replacing it. The good news is that five levels should be enough for most users.

    Here we go...

    /* 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;
    }
    
    /* Page displaying hacks /*
    
    /* Because IE6 doesn't support the child selector ">",		*/
    /* providing a good common styling method is rather hard.	*/
    /* This is why this hack takes care of only the first 5		*/
    /* levels of nesting (it will be OK for ~95% of the users)	*/
    
    /* First level */
    * html #access li:hover ul
    {
    	display:block;
    }
    
    * html #access li:hover ul ul
    {
    	display:none;
    }
    
    /* First level highlight fix */
    * html #access li:hover ul a
    {
    	color: #aaa;
    }
    
    * html #access li li:hover a
    {
    	color: #fff;
    }
    
    /* Second level */
    * html #access li li:hover ul
    {
    	display:block;
    }
    
    * html #access li li:hover ul ul
    {
    	display:none;
    }
    
    /* Second level highlight fix */
    * html #access li li:hover ul a
    {
    	color: #aaa;
    }
    
    * html #access li li li:hover a
    {
    	color: #fff;
    }
    
    /* Third level */
    * html #access li li li:hover ul
    {
    	display:block;
    }
    
    * html #access li li li:hover ul ul
    {
    	display:none;
    }
    
    /* Third level highlight fix */
    * html #access li li li:hover ul a
    {
    	color: #aaa;
    }
    
    * html #access li li li li:hover a
    {
    	color: #fff;
    }
    
    /* Fourth level */
    * html #access li li li li:hover ul
    {
    	display:block;
    }
    
    * html #access li li li li:hover ul ul
    {
    	display:none;
    }
    
    /* Fourth level highlight fix */
    * html #access li li li li:hover ul a
    {
    	color: #aaa;
    }
    
    * html #access li li li li li:hover a
    {
    	color: #fff;
    }
    
    /* Fifth level */
    * html #access li li li li li:hover ul
    {
    	display:block;
    }
    
    * html #access li li li li li:hover ul ul
    {
    	display:none;
    }
    
    /* Fifth level highlight fix */
    * html #access li li li li li:hover ul a
    {
    	color: #aaa;
    }
    
    * html #access li li li li li li:hover a
    {
    	color: #fff;
    }
    
    /* Final fix - all further nested items will show up at once */
    * html #access li li li li li li:hover ul
    {
    	display:block;
    }
    
    /* Final highlight fix */
    * html #access li li li li li 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 ---------------------------------------- */

    Feel free to propose a better, universal solution.

  25. Tara
    Member
    Posted 4 years ago #

    Thanks firelord,

    Please pardon my ignorance,
    (1) what is page "nesting"
    (2) and what is "page levels".

    I am trying to understand these terms so that I can determine if my site (personal) has nesting problem or not.

    If I don't have "nesting" problem, does it mean I can use your previous hack and not worry about this new hack?

  26. alhadis
    Member
    Posted 4 years ago #

    T-P: "Nesting" simply refers to the hierarchy of a submenu, and how subpages are laid out in a navigation menu. To take a basic example:

    Example Of Page Hierarchy 'Nesting'

    Remembering that pages are sorted like a hierarchy, you have one list of pages sorted under another. WordPress outputs the page tree like this (note that I've stripped out most of the attributes for clarity):

    <ul>
    	<li><a title="Home">Home</a></li>
    	<li><a title="About">About</a>
    		<ul>
    			<li><a title="Alpha Breed">Alpha Breed</a>
    				<ul>
    					<li><a title="Psycroptitude">Psycroptitude</a></li>
    				</ul>
    			</li>
    			<li><a title="Beta Breed">Beta Breed</a></li>
    			<li><a title="Human Release Candidate 3.0">Human Release Candidate 3.0</a></li>
    			<li><a title="More Than Human">More Than Human</a></li>
    		</ul>
    	</li>
    
    	<li><a title="Publications">Publications</a></li>
    		<li><a title="Stop">Stop</a>
    			<ul>
    				<li><a title="Supporting">Supporting</a></li>
    				<li><a title="Shit">Shit</a>
    					<ul>
    						<li><a title="Browsers,">Browsers,</a></li>
    						<li><a title="The">The</a>
    							<ul>
    								<li><a title="Future">Future</a></li>
    								<li><a title="Is">Is</a></li>
    							</ul>
    						</li>
    						<li><a title="Our">Our</a>
    							<ul>
    								<li><a title="Choice">Choice</a></li>
    							</ul>
    						</li>
    					</ul>
    				</li>
    			</ul>
    	</li>
    </ul>

    Which, without formatting of course, would result in a list looking like this.

    Now, what you're all trying to do is make things *pretty* for IE6 users. You're killing yourselves. The key here is to make the content accessible and navigable for older browsers, and it doesn't necessarily have to be done in the style of a dropdown menu. Just hide the subpage links in the nav bar so only the top level elements are visible, and have the subpages listed on each particular section when you go to that page. I don't think IE6 users are going to care about having to make one more click to get to a certain subpage.

  27. Firelord
    Member
    Posted 4 years ago #

    t-p, here's a concrete example (pages are in Russian).

    (videos)

  28. Firelord
    Member
    Posted 4 years ago #

    Here's an alternative solution based on Dean Edwards' script. It fixes the major problems, however you might want to keep the style hack for fixing the avatars in the comments (everything else can be removed).

    To use it download, install and activate this plugin: ie7compatfix.zip

    Note that it has a couple of drawbacks:

    • Relies on JavaScript;
    • Has a severe performance hit.

    I will do a little more research on the subject. My goal is to retain the HTC hack performance while fixing the child selector issue in an elegant way.

    If I achieve this, I will most likely issue another plugin for IE6 support with 2010 (based on CSS and JavaScript).

  29. Firelord
    Member
    Posted 4 years ago #

    Due to time/resource limitations I won't be improving the proposed fixes further. Please feel free to suggest any improvements and style fixes I might have missed.

  30. Tara
    Member
    Posted 4 years ago #

    Hi Firelord,

    while validation the style.css at W3C,

    I noticed the following item results in error:
    * html body
    any suggestion how to eliminate this error?

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags