IE7 + CSS Menu + 0.13

[martin42]

I'm using CMSMS 0.13 with CSSMenu 1.1.6.

It's OK with most browsers. But in IE7, the menu options do not get highlighted on mouse-over, EXCEPT if the mouse hovers over the text.

http://www.imba.org.uk

Any ideas on this??  I thought of adding lots of   tags to pad out the menu option text, but that's dirty!!

By the way, in the HEAD of each page I have:

Code: Select all

<![if lte IE 6]>
<__script__ type="text/javascript" src="/CSSMenu.js"></__script>
<![endif]>

That stops IE7 from loading the Javascript hack needed by older IE versions.  All other browsers still load it, which is a shame, but doesn't seem to matter.  The more usual code:

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="/CSSMenu.js"></__script>
<![endif]-->

... does not work in IE for Mac, which I stilll want to support.  But this makes no difference to the IE7 issue anyway.

Thanks for any thoughts!

- Martin.

[afri-can]

I know from other sites that I have worked on that if you give the CSS, block, width and height it helps this problem

[martin42]

Thanks, I'll try tweaking that!

[Greg]

Look at the lists here:

http://css.maxdesign.com.au/listamatic/vertical08.htm

or

http://css.maxdesign.com.au/listamatic/vertical13.htm

Note the comment about display: block attached to the CSS for the <a href=' tag

[martin42]

That looks useful.  I like the look of the second example, with the options that appear to push in and out.  I'll do some tests with this on my site later on.

Thanks Greg!

[martin42]

I've fixed this after some trial and error in many different browsers, so here's the fix in case it helps someone. 

To recap, the problem was that CSS Menus in IE7 would not highlight correctly, unless the user hovered over the text (rather than hovering over the space after the text).

Fix:

1) As afri-guy pointed out, IE7 needs to be told the width for the LI element (I guess it should trickle down from the parent but Microsoft's code is buggy).  Here's a diff that shows the line to add to CSSMenuVertical.css to fix IE7:-

Code: Select all

  ul.cssmenu-vertical li a {
    display: block;
    text-decoration: none;
    color: #000077;
    padding: 5px;
    border: 1px solid #000077;
    border-bottom: 0;
+   width: 158px;     // WARNING.  Breaks some browsers :-(
    }

2) The problem here is that this breaks some browsers.  You can try using IE's conditional comments here, but that's not really allowed in CSS files, and so of course it breaks yet more browsers if you do it!

So my dirty, dirty fix is to make two versions of CSSMenuVertical.css and tweak CSSMenu.module.php accordingly (you need to do this in two places)...

Code: Select all

      if(isset($_SERVER['HTTP_USER_AGENT']) && preg_match('/MSIE 7/', $_SERVER['HTTP_USER_AGENT']))
      {
        @readfile(dirname(__FILE__).'/CSSMenuVerticalIE7.css');
      }
      else
      {
        @readfile(dirname(__FILE__).'/CSSMenuVertical.css');
      }

Dirty but it seems to do the job.  (Tested in IE5.01, IE5.5, IE6, IE7, Firefox 1.5 and 2.0, Opera, Konqueror, Netscape, Safari, Camino on Win2K/XP, MacOS, Linux.)

A remaining bug is that my drop-down CSS Menus don't always rub themselves out correctly in Safari on the Mac (Intel Macbook).    If anyone can suggest a fix for that, I'd be very grateful.  http://www.imba.org.uk