Anyone know what this type of bug is in IE7?

Hi everyone, I am trying to fix a problem with my website which only happens in IE 7.

After you hover over the top right "Quick Select" drop down menu, the drop down flickers while hovering over part of the top banner.

I've been looking through various bugs with IE 7 and can't seem to find the solution.

The menu works fine in Firefox, Opera and IE 6 so it must be an Internet explorer 7 issue.

Has anyone got any ideas?

For a live example, the website is www.fcbs.co.uk and the code for the xhtml and css are the following:

XHTML:

<div id="banner">
<div id="dropmenu" class="menu">
<ul>
<li><a href="" title="Sitemap">---Quick Select---<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.fcbs.co.uk" title="FCBS Homepage">FCBS Homepage</a></li>
<li><a href="http://www.fcbs.co.uk/about-fcbs/" title="About FCBS">About FCBS</a></li>
<li><a href="http://www.fcbs.co.uk/articles/copier-history/" title="Copier History">Copier History</a></li>
<li><a href="http://www.fcbs.co.uk/customer-services/" title="Maintenance Service">Maintenance Service</a></li>
<li><a href="http://www.fcbs.co.uk/office-products/" title="Office Equipment">Office Equipment</a></li>
<li><a href="http://www.fcbs.co.uk/online-catalogue/" title="Products Catalogue">Products Catalogue</a></li>
<li><a href="http://www.fcbs.co.uk/online-catalogue/konica-minolta/" title="Konica Minolta">Konica Minolta</a></li>
<li><a href="http://www.fcbs.co.uk/online-catalogue/infotec/" title="Infotec">Infotec</a></li>
<li><a href="http://www.fcbs.co.uk/online-catalogue/brother/" title="Brother">Brother</a></li>
<li><a href="http://www.fcbs.co.uk/online-catalogue/toshiba/" title="Toshiba">Toshiba</a></li>
<li><a href="http://www.fcbs.co.uk/consumables/" title="Office Supplies">Office Supplies</a></li>
<li><a href="http://www.fcbs.co.uk/buyer-guide/" title="Copier Buyer Guide">Copier Buyer Guide</a></li>
<li><a href="http://www.fcbs.co.uk/quotation/" title="Quote Request">Quote Request</a></li>
<li><a href="http://www.fcbs.co.uk/leasing/" title="Copier Exchange">Copier Exchange</a></li>
<li><a href="http://www.fcbs.co.uk/case-studies/" title="Case Studies">Case Studies</a></li>
<li><a href="http://www.fcbs.co.uk/recruitment/" title="Job Opportunities">Job Opportunities</a></li>
<li><a href="http://www.fcbs.co.uk/sharp/sharp-mx/" title="Sharp MX">Sharp MX</a></li>
<li><a href="http://www.fcbs.co.uk/contact-fcbs/" title="Contact FCBS">Contact FCBS</a></li>
<li><a href="http://www.fcbs.co.uk/privacy-policy/" title="Privacy Policy">Privacy Policy</a></li>
<li><a href="http://www.fcbs.co.uk/links/" title="External Links">External Links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>

HTML:

CSS

#banner{
padding:0px;
margin:0px;
height:95px;
background:url(http://www.fcbs.co.uk/Images/top.jpg);
}

#dropmenu{
	border-top:1px solid #CCCCCC;
	float:right;
	margin-right:16px;
	margin-top:61px;
	width:140px;
}

.menu ul {
padding:0;
margin:0;
list-style-type:none;
height:16px; 
}

.menu ul ul {
z-index:1;
}


.menu ul li {
float:left;
height:16px;
line-height:16px;
z-index:1
}


.menu ul ul li {
display:block;
height:auto;
line-height:16px;
}


.menu a, .menu a:visited {
	display:block;
	float:left;
	height:100%;
	font-size:10px;
	width:118px;
	text-decoration:none;
	color:#333333;
	padding:0 10px 0 10px;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	background-color: #FFFFFF;
}


.menu ul ul a, .menu ul ul a:visited {
	display:block;
	color:#333333;
	width:118px;
	height:100%;
	line-height:16px;
	padding:0 10px 0 10px;
	background-color: #FFFFFF;
}
* html .menu ul ul a, * html .menu ul ul a:visited  {
width:118px; 
w\idth:118px;
}


.menu table {
position:absolute;
left:-1px;
top:0;
width:0;
height:0;
font-size:10px;
z-index:-1;
}



* html .menu a:hover {
	color:#000000;
	position:relative;
	z-index:100;
	background-color: #CCCCCC;
}
.menu li:hover {
position:relative;
}
.menu :hover > a {
	color:#000000;
	background-color: #CCCCCC;
}

* html .menu ul ul a:hover{
	color:#FFFFFF;
	position:relative;
	z-index:110;
	background-color: #003399;
}
.menu ul ul li:hover {
position:relative;
}
.menu ul ul :hover > a {
	color:#FFFFFF;
	background-color: #003399;
}


.menu ul ul {visibility:hidden;position:absolute;height:0;top:16px;left:0;}





.menu ul :hover ul{
visibility:visible;
height:auto;
background:transparent;
}

.menu ul :hover ul ul{
visibility:hidden;
}

.menu ul :hover ul :hover ul ul{
visibility:hidden;
}

.menu ul :hover ul :hover ul{
visibility:visible;
}

.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

HTML:

 

Add min-height: 1%; to these rules and see what happens:

.menu ul ul li:hover {
position:relative;
}

.menu ul :hover ul :hover ul{
visibility:visible;
}

.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

But seriously, I'd look into using the Sons of Suckerfish dropdown menu instead of this one, simply to get rid of the conditional comments.

 

Thanks for the quick reply. Does the Suckerfish use javascript? I was hoping to have a drop down without javascript.

Many thanks

 

It does, but only a little bit. You can use a .htc file embedded in your stylesheet if you want, but the stylesheet won't validate (necessitating the importation of a separate IE only stylesheet into the main one or using conditional comments inside the HEAD section of the HTML file) if you do.

Frankly, if the menu is the only use of :hover on non-link elements you need, I think the tradeoff is worth it, especially if you already have a single JavaScript file you store your global scripts in anyway (just like a stylesheet you can just add and remove scripts from this "library" as needed).

Separation of structure, presentation, and behavior. Gotta love it.

 

Okay thankyou. I'll look into it.

Kind Regards

Gie