CFMENUITEM and Extra Angle bracket

Engaged ,
Jun 09, 2016 Jun 09, 2016

Copy link to clipboard

Copied

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.

Capture1.JPG

    

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.

Capture.JPG

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.

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Guide , Jun 13, 2016 Jun 13, 2016
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?

Likes

Translate

Translate
Guide ,
Jun 13, 2016 Jun 13, 2016

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 20, 2016 Jun 20, 2016

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jun 20, 2016 Jun 20, 2016

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 20, 2016 Jun 20, 2016

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines