Menu: In IE ui-icon-carat overlaps text when menu items are too wide

I'm assuming you're using a very small window to test this? When I open that fiddle in IE8, the menu is full width, so I need to shrink the frame to the point where I need to scroll. Then the caret display on top of the text. What are you expecting the result to be? What do you want us to change to accomodate your custom CSS?

Replying to [comment:1 scott.gonzalez]:

I'm assuming you're using a very small window to test this? When I open that fiddle in IE8, the menu is full width, so I need to shrink the frame to the point where I need to scroll. Then the caret display on top of the text. What are you expecting the result to be? What do you want us to change to accomodate your custom CSS?

We tried to use widget "menu" for buttons with popups. "Popup"-menu is position via jquery-ui position (so css property "position" became "absolute"). We tried to avoid setting width of the menu in pixels and tried to get only one line for each menu-item. So "white-space" is set to "nowrap". Example 2: http://jsfiddle.net/ckFbw/2/.

Expected behaviour achieved in Chrome and Firefox - caret displayed on the right of the menu item. In IE if the menu-item is the longest and it has popup the caret is displayed on the top of the menu-item text ending.

Chrome-like behaviour is expected in IE. The posible solution is to set bigger "padding-right" for menu-items with popups and to position caret same way, as it is done with icons in menu-items.

I see the overlap in IE 7 - 10, but I don't think this is something that UI should be handling.

I do not believe the use case of having menu items with no explicit width and cannot wrap is common. Plus you can work around this with a max-width and some overflow handling: http://jsfiddle.net/tj_vantoll/Rtbym/2/.

If others show interest in this we can reinvestigate.

I agree with TJ that this doesn't seem like something we need to handle, but I'd be happy to review any pull requests that might fix this.