Problem with IE menu rollover and link

Looking for some magic CSS or Javascript to ease my pain

[cosmicrob]

Greetings to all,

I'm working on a horizontal menu that has image based rollovers on the main level and text based rollovers in the drop down menus. I'm basing my drop downs after the one on solardreamstudios's site, and all is well except that I cannot get IE to click the top level image based links.

I used the "text-indent: -9999px" trick to hide the text that would appear on top of the images. It works for FireFox but not IE. I did manage to get IE rollovers to work with a bit of Javascript I found, but no linkage.

Any help is most welcome.

Here is the CSS:

#mainmenu,
#mainmenu a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
}

#mainmenu a{
display: block;
text-align: left;
padding-right: 4px;
padding-left: 10px;
}

#mainmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 576px;
list-style: none;
}

#mainmenu ul li {
margin: 0;
padding: 0;
float: left; /*For Gecko*/
list-style: none;
position: relative;
text-indent: -9999px;
}

#mainmenu ul ul {
margin: 0;
width: 170px;
list-style: none;
display: none;
position: absolute;
top: 27px;
left: 0;
}

#mainmenu ul ul li {
text-indent: 0px;
float: none; /*For Gecko*/
display: block!important;
display: inline; /*For IE*/
}

/* ===== Main Menu items ===== */

li#mm-overview {
background-image: url(../images/menu.gif);
height: 27px;
width: 88px;
background-position: 0px 0px;
float: left;
}

li#mm-overview:hover,
li#mm-overview.iehover{
background-position: 0px 28px;
}

/* there are 5 other menu items which I've omitted for brevity... */

/* Root Menu */
#mainmenu ul a {
float: none!important; /*For Opera*/
float: left; /*For IE*/
display: block;
height: auto!important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */

#mainmenu ul a:hover,
#mainmenu ul li:hover a,
#mainmenu ul li.iehover a {
color: #000;
}

Here is the HTML:

<div id="mainmenu">
<ul>
<li id="mm-overview"><a href="/castest/overview"><span>Overview +</span></a></li>
<li id="mm-academics"><a href="/castest/academics"><span>Academics +</span></a></li>
<li id="mm-admissions"><a href="/castest/admissions"><span>Admissions</span></a></li>
<li id="mm-advising"><a href="/castest/advising"><span>Advising +</span></a></li>
<li id="mm-registrar"><a href="/castest/registrar"><span>Registrar +</span></a></li>
<li id="mm-supportservices"><a href="/castest/supportservices"><span>Support Services +</span></a></li>
</ul>
</div>

[SuzyUK]

greetings csmicrob, and welcome to the forums!

it's a bit odd, but fixable..

it's all in this rule:

#mainmenu ul a {
/*float: none !important;*/ /*For Opera*/
float: left; /*For IE*/
display: block;
/* height: auto !important; */
/* height: 1%; */
width: 100%; /* For IE*/
}

don't quite know why but IE6 is not respecting the 1% height hack, it should respect the height in IE7 but not IE6 and that hack is required in order to trigger "hasLayout == true"

however it works with width and also I think this sorts the float problem you seem to have had, if you set a width on the <a> it means you do not need the !important hacks and you can safely float the links, but perhaps that was there for another reason?

anyway the short story is that IE requires layout on the links, both the float: left; and height: 1% should have done it but the text indent obviously means that a width is preferable.. zoom: 1; does it too if width causes problems!

also be aware that IE7 still needs the layout hack, but it has also fixed its support of !important, so the way you have it at the minute wouldn't work for IE7 anyway (it will honour the auto width/height), whereas if you use the explicit width you don't need to override it with a second hack so it works better all round I think.

hth
Suzy