Page 5 of 5 Thankfully, IE6 handles list styling more or less like other modern browsers, but IE5.5 and IE5 have some pretty strange issues when it comes to the location where you would normally see a bullet. For this navigation menu we have removed the list bullet in the CSS, but those old IEs only partially comply with the rule. While they do remove the visible bullet marker, they seem to still reserve a 16px wide "zone" for the bullet anyway.
Because of some other IE bugs, we will have to apply the Holly hack to the ULs, the LIs, and the links too. Several pesky IE bugs are fixed in this way, by applying a height to those elements, and in the case of the list items, the bullet zone issue changes somewhat. Fortunately, the change actually improves and simplifies things, so much so that all we need to complete the fix is to apply a negative 16px left margin on the list items.
However, IE6 does not need this negative margin, so we must make sure only the older IE/Win versions will see this fix. Since we already need a conditional comment to hold our csshover.htc Jscript, we can just put our IE-only rules in there as well. In addition to the bullet fix and the .htc behavior call, we will add a <noscript> element that holds a style block containing just one special rule. All this will be explained shortly, but first view the complete conditional comment:
<!--[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
ul a, ul, li {height: 1%;} /* Holly hack fix for IE bugs */
li {
margin-left: -16px;
mar\gin-left: 0;
}
</style>
<noscript>
<style type="text/css">
ul ul {position: static;}
</style>
</noscript>
<![endif]-->
Code Block 5
This special HTML comment hides everything inside it from all browsers except IE/Win. The first thing in the comment is a style block with three rule sets inside. The first is the behavior call for the Jscript, followed by the {height:1%;} for the ULs, LIs, and links. The final rule set in the style block targets the list items, applying {margin-left:-16px;}. Directly after that is same property, but with a different value {mar\gin-left:0;}. This second rule overrides the first margin rule, resetting the margin to zero. However, the presence of the escape slash (\) within the property name prevents the older IE versions from reading the property name, so they ignore the rule. IE6 has no problems with such legal escape characters, so it does read the second margin rule, which is what we want since IE6 does not need the negative margin.
Using escapes like this to hide from the old IEs is great, but be sure that the escape is always inside the property name, and never place the escape directly before any character that is one of the first six in the English alphabet (a, b, c, d, e, f). If you do this, it's treated as a "hex code" and IE6 (and other browsers) will also fail to read the rule.
Make sure you don't use HTML comments inside the conditional comment, as comment nesting is strictly forbidden!
The <noscript> block is seen only by IE/Win browsers because it is inside the conditional comment. If scripting is disabled, the code inside the <noscript> element will be used only by IE browsers. In that case, a browser will parse the style block it finds within the <noscript> element and apply the rule ul ul {position: static;}. This overrides the ul ul {position: absolute;} rule found in the regular style sheet, as long as the conditional comment is located later in the head of the document than the link to the style sheet. If the style sheet link falls later, the selector in the <noscript> element will have to be made more specific in order to make sure it is applied when scripting is disabled. See our article on the cascade and specificity for more information on this topic.
Image 4: The display of the fully expanded list sets as shown in Firefox.
By making the flyouts static when scripting is disabled, they will appear as the nested lists they really are, and will stack vertically down the page. Their other stylings will remain intact, though. This allows those IE users (without scripting enabled) to still click on every link in the navigation menu. It may not be as pretty as the dynamic flyout menu, but at least those few users won't be shut out of your site.
Image 4 to the right shows how the menu looks when expanded. This graphic was made using Firefox. If the menu is seen expanded in IE/Win it won't look quite as clean as this. However, it is possible to add more rules to the CSS in the <noscript> element for the purpose of styling the menu when it is in its expanded state.
Internet Explorer for Macintosh has a greater problem in that it does not support the flyouts at all. Therefore, it's necessary to expand the menu for IE5/Mac users as well, whether scripting is disabled or not. This can be done using a copy of the CSS within the <noscript> block; placing it outside the conditional comment where IE5/Mac can see it.
Since we don't want any browsers other than IE5/Mac to see it, we'll need a way to show it only to IE5/Mac. Placing this copy of the list expanding CSS rule in a special CSS comment that only IE5/Mac actually parses as valid CSS code will solve the problem. Here's the complete code set to use:
The CSS for IE5/Mac:
/* \*/ /*/
ul ul {position: static;}
/* */
Code Block 6
This code needs to go inside the main CSS style sheet, somewhere after the rule it will override. If it comes before the ul ul {position: absolute;} rule, this altered rule for will have no effect for IE5/Mac.
We call this construction the Anti-Mac-hack, because it reverses the normal action of the Mac hiding hack. What happens is that when IE5/Mac sees that escape ( \ , colored red in Code Block 6), it fails to recognize the star directly after the escape (and thus the closing comment construction, */) so it thinks the CSS comment is still active. Then when it sees the /*/ part, the last two characters there appear to end the comment for IE5/Mac. Thus, the browser parses the following style block, applies that rule, and recognizes the last part of the code as a simple empty comment.
On the other hand, other browsers are not fooled by the escape ( \ ), so they end the first comment right where it should end. Then the /*/ part is viewed, not as the end of the first comment, but as the beginning of another one! Thus these browsers ignore the style rule, and also ignore the beginning of the last line. Finally they see the last two characters, */, and end the comment. Now all browsers are back to normal parsing, but IE5/Mac has been fed styles that no other browsers recognized. Very handy, indeed.
By providing these tricks, we have arranged for browsers which cannot handle the flyout menu to get a usable expanded one instead. So all browsers later than Nav 4 will get some kind of navigation, and nearly all of them will get our pretty flyouts. Neat.
Even Nav 4 may be fed a dumbed down nav using similar tricks. See the Caio hack article for details on how to accomplish it.
In the upcoming installment we will make certain code modifications so that the hovering will be more "sticky," making the menu more user friendly. Stay tuned!
Approximate download size: 128k
Page 5 of 5 Previous
1
2
3
4
5
Keywords
CSS, flyout, flyouts, dropdown, menu, navigation, :hover, csshover.htc, Jscript, 'sticky hovering,' tooltips, list, lists, sublist, submenu, z-index, holly hack, conditional comment, Anti-Mac-hack, escape, noscript
