CFMENUITEM and Extra Angle bracket

[KomputerMan_com-L7dcfe]

Got a pretty simple menu shown below.  It all works fine but there is one weird issue I could use a little help with.

Turn out if run this code in Chrome I don't have any issues but if I run it in Internet Explorer 11 there is a bit of a problem.  The problem is the closing angle bracket  ">", that represents there are submenus, gets displayed in the middle of the text string in Internet Exploder but is displayed to the right of the text string in Chrome.

     This picture is what I see in Chrome AND IF I remove the menu from a table structure.

The following is what I see if I have the menu in a table AND it's displayed in Internet Explorer 11. The bracket is in white which makes it hard to see but it's still there.

It only happens on the cfmenuitem that indicates it is a submenu with further submenus, as depicted in line 8 of the snippet below. The menu also as to be embedded in a table structure which makes me think its a bug within the tag itself.

<TABLE>

<TR>

  <TD>

  <cfmenu name="MainMenu" font="Times New Roman, Times, serif" fontcolor="##000000" fontsize="12" selectedfontcolor="black" selecteditemcolor="##E1E1E1" type="horizontal">

  <cfmenuitem name="adminMenu" childstyle="" display="KDL Test Menu" href="index.cfm" style="text-align:left;">

  <cfmenuitem display="Level 1" href="L1.cfm" style="text-align:left;"/>

  <cfmenuitem display="Level 2" href="L2.cfm;" style="text-align:left;"/>

  <cfmenuitem display="Level 3" style="text-align:left;">

  <cfmenuitem  display="L3 A" style="text-align:left;" href="L3A.cfm;" />

  <cfmenuitem display="L3 B" style="text-align:left;"  href="L3B.cfm;" />

  </cfmenuitem>

  </cfmenuitem>

  </CFMENU>

  </TD>

</TR>

</TABLE>

Any advice on how I can force the location of the angle bracket on sub menu items?  Thanks in advance for the assistance.

[Carl Von Stetten · Accepted solution]

I've never used <CFMENU> or <CFMENUITEM>, but if I had to hazard a guess, I'd say there's a flaw in the CSS that is being applied.  First, try the developer tools in Chrome and IE and compare the CSS properties of the menu item in both browsers.  What is being done differently?  Is there some custom CSS that is overriding the CSS style that ColdFusion embeds?

[KomputerMan_com-L7dcfe]

Good catch Carl.  After a little sleuthing I found the issue in the YUI.css file that controls the look and feel of the CFMENU items. 

[Carl Von Stetten]

Was it a flaw in the Adobe-delivered CSS file, or is that a custom file?  If in the Adobe-delivered one, you might file a bug report so it can be fixed: Home

[KomputerMan_com-L7dcfe]

It is in a CF server 9 installation provided by Adobe.  The file is YUI.css.

Below are a few lines out of that file:

.visible .yuimenuitemlabel .helptext {

    float:right;

    width:100%;

    text-align:right;

    margin:-1.2em 0 0 0;

    *cursor:hand; /* Required to restore the style of the cursor in IE */

}

.visible .yuimenuitemlabel .submenuindicator {

    margin:-.9em -16px 4px auto;

    /*margin:-.9em -16px 0 105%;*/

}

The problem was the second to last line listed above.  Originally it was set to *margin:-.9em -16px 0 105%;

To make it work I just had to comment that line out as shown in the code snippet.