CSS issues with Opera 9.25 and IE7

[galahad2]

I'm currently developing a site which is div-based with the div properties all handled in an external CSS document. I have a second CSS file which handles a pure CSS dropdown navigation menu. The problem is this:
In Opera, the 6 sub-items in the dropdown menu are only partially visible (the first 2 and part of the 3rd) and on rollover, the menu buttons fragment further. None of the links on them are clickable.

In IE7 there is an issue which I feel must be related, only handled differently. IE7 displays the dropdown menu well enough, but only the first 4 of the 6 submenu buttons can be clicked. The bottom 2 cannot be clicked- in fact when you mouse over either of them the submenu disappears entirely (as if it had lost the focus i.e the user had clicked elsewhere).

Firefox (which I use for primary testing) seems to handle the whole system fine (although if you move slowly from the parent button in the top menu onto the submenu, sometimes the submenu disappears). Netscape behaves in exactly the same way. IE 6 is also fine- better in fact as the submenu always remains in place on mouseover.

I wondered if the issue with Opera and IE7 was something to do with the z-indexes of the various divs? However I've tried making the menu and submenu have higher z-indexes than any other elements (by actually giving them values) but to no avail.

This is the menu css file:

.menu1 {
float:left; position:absolute; width:900px; top:168px; left:64px; height:25px;font-family: verdana, arial, sans-serif; font-size:11px;
background-color:#fdf7e1;
border-top:0px solid #4c597f; border-bottom:0px solid #4c597f;
margin:0 0 0 0; z-index:201; /* for this demo only */
}
.menu1 ul {
padding:0;margin:0;list-style-type:none;
}
.menu1 ul li {
float:left; position:relative; background:none; z-index:202;
}
.menu1 ul li a, .menu1 ul li a:visited {
float:left; display:block; text-decoration:none;color:#ddf; padding:0px 0px; line-height:25px; height:23px; border-bottom:0px solid #fdf7e1;
}

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li a.menu1two:hover {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li a.menu1three:hover {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li a.menu1four:hover {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li a.menu1five:hover {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li a.menu1six:hover {border-color:#fdf7e1; color:#fdf7e1;}

.menu1 ul li:hover a.menu1one {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li:hover a.menu1two {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li:hover a.menu1three {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li:hover a.menu1four {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li:hover a.menu1five {border-color:#fdf7e1; color:#fdf7e1;}
.menu1 ul li:hover a.menu1six {border-color:#fdf7e1; color:#fdf7e1;}

.menu1 ul li ul {
display: none;
}
.menu1 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu1 ul li:hover ul {
display:block;position:absolute;top:25px;margin-top:1px; left:-20px;width:166px;border-bottom:0px;
}
.menu1 ul li:hover ul.endstop {
left:-92px;
}
.menu1 ul li:hover ul li ul {
display: none;
}
.menu1 ul li:hover ul li a {
display:block;background:none; color:#000;height:auto;line-height:0px;padding:1px 0px; width:166px; border:0px; border-bottom:0;
}
.menu1 ul li:hover ul li a.drop {
background:none;
}
.menu1 ul li:hover ul li a:hover {
color:#000; background:none;
}
.menu1 ul li:hover ul li a:hover.drop {
background:none;
}
.menu1 ul li:hover ul li:hover ul {
display:block; position:absolute; left:123px; top:-1px;
}
.menu1 ul li:hover ul li:hover ul.left {
left:-123px;
}

Sample page code where the menu appears:

<div class="menu1">
<ul>
<li><a class="menu1one" href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/btn_home_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_home.gif" alt="Home Page" width="126" height="23" border="0" id="Image1" hspace="1" vspace="2" /></a></li>
</ul>
<ul>
<li><a class="menu1two" href="grants.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/btn_grants_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_grants.gif" alt="Grants" width="126" height="23" border="0" id="Image2" hspace="1" vspace="2" /></a></li>
<li><a class="menu1three" href="#nogo" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/btn_activities_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_activities.gif" alt="Activities" width="126" height="23" border="0" id="Image3" hspace="1" vspace="2" />
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="education.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/btn_education_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_education.gif" alt="Education and Training" width="166" height="23" border="0" id="Image4" /></a></li>
<li><a href="research.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/btn_research_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_research.gif" alt="Research and Development" width="166" height="23" border="0" id="Image5" /></a></li>
<li><a href="promotion.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/btn_promotion_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_promotion.gif" alt="Promotion and Publicity" width="166" height="23" border="0" id="Image6" /></a></li>
<li><a href="capital.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/btn_capital_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_capital.gif" alt="Capital and Equipment" width="166" height="23" border="0" id="Image7" /></a></li>
<li><a href="production.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/btn_production_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_production.gif" alt="Production and Marketing" width="166" height="23" border="0" id="Image8" /></a></li>
<li><a href="environment.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/btn_environment_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_environment.gif" alt="Environment and Wildlife" width="166" height="23" border="0" id="Image9" /></a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1four" href="applications.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/btn_applications_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_applications.gif" alt="Applications" width="126" height="23" border="0" id="Image10" hspace="1" vspace="2" /></a></li>
<li><a class="menu1five" href="history.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/btn_history_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_history.gif" alt="History" width="126" height="23" border="0" id="Image11" hspace="1" vspace="2" /></a></li>
<li><a class="menu1six" href="founder.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/btn_founder_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_founder.gif" alt="Founder" width="126" height="23" border="0" id="Image12" hspace="1" vspace="2" /></a></li>
<li><a class="menu1six" href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/btn_links_over.gif',1)"><img src="http://www.example.co.uk/vb/images/btn_links.gif" alt="Links" width="126" height="23" border="0" id="Image13" hspace="1" vspace="2" /></a></li>
</ul>
</div>

Finally, some of the divs referenced in my "main" CSS file (the ones located near to the menu):

.topbanner {
position:absolute;
top:0px;
left:64px;
height:167px;
width:900px;
background-image:url(images/fctlogo4.jpg);
}

.mainbody {
position:absolute;
top:165px;
left:64px;
height:448px;
width:853px;
background-color:#fdf7e1;
padding-left:47px;
padding-top:80px;
}

.rhpics {
position:absolute;
top:195px;
left:616px;
height:497px;
width:346px;
}

Lack of functionality in Opera is a concern, but IE7 even more so given the proportion of people who use it.

I also made a version which uses just text links (no image rollovers) but Opera did exactly the same thing.

Anyone who has any ideas, I would be very grateful!

Unfortunately I can't provide a link to the site due to the posting rules, so the code above is all I can show.

[edited by: encyclo at 1:24 am (utc) on Jan. 15, 2008]
[edit reason] examplified, see posting guidelines [/edit]

[SuzyUK]

I also made a version which uses just text links (no image rollovers)

It would have been nice if you posted that version ;) the above code is way too long.. when identifying problems with dropdowns we only really need the smallest possible sample. and you were right to take it back to a text version.. if that doesn't work neither will images :)

the excess code is obscuring the method you're using, that of nesting a table in link for IE6 and below, and from a quick glance I don't think it's valid for compliant browsers which is why it's possibly not working in Opera.

however take a look at this thread [webmasterworld.com] not quite the same question but it does explain how this particular code should be nested and what those conditional comments are doing (there are two types)

hth
-Suzy