IE6 is broken.
#menu ul.level2 li {
display: block;
}
#menu ul.level2 li a {
display: block;
float: none;
border: 1px solid transparent; /* Stops the box from jittering on hover */
margin: 0.25em 0px;
padding: 0.3em 0.6em;
background: transparent;
color: #666666;
font-weight: normal;
}
#menu ul.level2 li a:hover {
background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x;
color: #ffffff;
border: 1px solid #f2683d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
2 major problems. There is a large margin on the bottom of my list items, and there is a funny dark grey border around each list item. So why these 2 bugs?
Grey Border
The grey border is caused by IE6′s failiure to render transparent borders. It instead falls back to the color property (which in this case is set to #666666).
This is the first place on my site where I need to render something differently in IE6 to other browsers. There are 2 ways of doing this:
- Use the famous ‘* html’ hack. IE has a mysterious wrapper around the html tag (god only knows why!).
- Include another stylesheet for IE6
For a site of this size, the sensible option was to include a separate stylesheet for IE and below. The stylesheet should only render in IE5 and 6 because of the @import hack (hides the stylesheet from all v4 browsers):
<!--[if lt IE 7]> <mce:style type="text/css" media="screen"><! @import "style/ie6.css"; --> <!--[endif]-->
To fix the border, we set the border color to a color we’ll never use within the element or on any of it’s children – pink is usually a good bet. We then apply the Microsoft CSS filter property to that color to make it transparent.
#menu ul.level2 li a {
border-color: pink;
filter: chroma(color = pink);
}