Originally Posted by
Michael Morris
:hover does work on anchor elements in IE 6. It's the only psuedo element that does work in IE 6, and then only for that element. He has a filter property in place for IE 6 so it might work.
For what it's worth. I stopped bending over backwards to make things work on IE 6 years ago, but I still remember what will and won't work in that beast.
Yes I know that hover works on anchors in IE6 but that wasn't the issue I was talking about 
I was referring to the fact that I increased the anchors height on hover by 5px to overlay the shadow. Due to Ie6's expanding box problem it will simply increase the parents height from 40px to 45px to accommodate the larger child element and hence break the design.
I could have fixed IE6 with a bit more code but seeing as it didn't look like IE6 was being supported because the display was all over the place then I didn't think it mattered not offering a fix.
The other main problem with IE6 was that haslayout on the child element (the anchor) causes each floated widthless list item to be 100% of the ul and not the parent list element. The result is that Ie6 runs to about 10 long lines down the page.
Here is a version fixed for IE6. The IE gradient filter will work but there is no drop shadow (unless you want to hunt through the filters collection and find one ).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul#menu {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding:0;
height:40px;
width:960px;
background: #FF3333; /* old browsers */
background: -moz-linear-gradient(top, #FF3333 0%, #990000 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF3333), color-stop(100%, #990000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#990000', GradientType=0 ); /* ie */
-webkit-box-shadow: 0px 1px 2px #2b2b2b;
-moz-box-shadow: 0px 1px 2px #2b2b2b;
box-shadow: 0px 1px 2px #2b2b2b;
}
ul#menu li {
display: inline;
overflow: hidden;
cursor: pointer;
float: left;
margin: 0;
margin-left:20px;
}
ul#menu li:first-child, ul#menu li.first {
margin-left:10px !important;
}
ul#menu li.lang-hr {
margin-left:45px !important;
}
ul#menu li.lang-en {
margin-left:1px !important;
}
ul#menu li a {
color: #fff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
float:left;
height: 28px;
padding:12px 5px 0px 5px;
}
ul#menu li a:hover, ul#menu li a.active {
color: #990000;
background-color:#fff;
padding:12px 5px 5px 5px;
}
* html ul#menu li a:hover, * html ul#menu li a.active {
margin-bottom:-5px
}
</style>
</head>
<body>
<ul id="menu">
<li class="first"><a class="active" href="#">sample1</a></li>
<li><a href="#">sample sample</a></li>
<li><a href="#">sample3</a></li>
<li><a href="#">sample3 samp</a></li>
<li><a href="#">isample3423</a></li>
<li><a href="#">sample45</a></li>
<li><a href="#">sample5</a></li>
<li><a href="#">sample6</a></li>
<li class="lang-hr"><a class="active" href="#">f</a></li>
<li class="lang-en"><a href="#">g</a></li>
</ul>
</body>
</html>
Bookmarks