Menu: Internet explorer 10 renders bullets in submenus

[Mamen]

IE10 renders list-styles on the <li>s

This seems to be only on sub menus. Possible since they starts out as hidden.

Test here: ​http://jqueryui.com/menu/ select "Delphi" or "Salzburg". Bullets appear.

Tested on IE10 (Windows 7)

[tj.vantoll]

Confirmed. I see the problem in IE10 and not IE < 10. I'll try to minify this one a bit.

[Mamen]

Setting the css after it is visible seems to fix the problem. (remove/add class?)

[tj.vantoll]

Might be the same issue as #8677.

[tj.vantoll]

Here's a reduced test case that shows the issue - ​http://jsfiddle.net/tj_vantoll/v4MJX/.

@Mamen could you fork my jsFiddle and show how setting the CSS after the submenu is visible works around the problem?

[Mamen]

This fixes the problem in IE10. ​http://jsfiddle.net/mrmamen/T3Sgm/

I've also tested in IE10 for Windows 8 now.

[tj.vantoll]

Replying to Mamen:

This fixes the problem in IE10. ​http://jsfiddle.net/mrmamen/T3Sgm/

I've also tested in IE10 for Windows 8 now.

Thanks.

This is almost certainly the same issue as #8677 which was closed as wontfix. That being said #8677 was a pretty minor issue whereas with this one the default look has major visible issues.

[gdonkers]

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours: ​http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

[tj.vantoll]

Replying to gdonkers:

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours: ​http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

Good find. li, li { list-style-type: none; } indeed fixes the issue, but this isn't something we can apply globally. Whenever I try to incorporate .ui-menu or .ui-menu-item into the selector it doesn't work anymore, which is just bizarre - ​http://jsfiddle.net/tj_vantoll/jaRbf/1/.

Can anyone come up with a CSS way of fixing this that limits the rules to <li>s in a .ui-menu?

[gdonkers]

Replying to tj.vantoll:

Replying to gdonkers:

I've found the same problem with the menubar(). Got a better solution also for menu(). See mu jsFiddle based on yours: ​http://jsfiddle.net/RT9Xz/

just adding css: li, li li, li li li {

list-style-type: none;

}

Good find. li, li { list-style-type: none; } indeed fixes the issue, but this isn't something we can apply globally. Whenever I try to incorporate .ui-menu or .ui-menu-item into the selector it doesn't work anymore, which is just bizarre - ​http://jsfiddle.net/tj_vantoll/jaRbf/1/.

Can anyone come up with a CSS way of fixing this that limits the rules to <li>s in a .ui-menu?

Who that was strange. But I've found the solution: add the display: inline; to it. ​http://jsfiddle.net/aeCxq/

edit: Crap, I didn't check it in an different browser, i.e. in Safari for Mac it doesn't work. Can we make it an only IE10 css or find an different solution?

[gtraxx]

Hi, Fix bug with :

li.ui-menu-item { 
  /* This fixes the IE10 issue */
  list-style-type: none;
}

[tj.vantoll]

Replying to gtraxx:

Hi, Fix bug with :

li.ui-menu-item { 
  /* This fixes the IE10 issue */
  list-style-type: none;
}

I'm still seeing it ​http://jsfiddle.net/tj_vantoll/jaRbf/3/.

[fetis]

I think this can work as fix

.ui-menu-item {
  /* IE10 fix */
  list-style-image: url(data:0);
}

I can't say how badly to have fake image here. But I think it's better than to have real url like url(blank.gif)

[tj.vantoll]

Replying to fetis:

I think this can work as fix

.ui-menu-item {
  /* IE10 fix */
  list-style-image: url(data:0);
}

I can't say how badly to have fake image here. But I think it's better than to have real url like url(blank.gif)

Very clever and it works! url(data:0) sends out an invalid request so you're right that we want a real image. We don't have a small / transparent image in the project (I suppose we could add one), but sending the smallest possible transparent data-uri'd image seems to work fine (​http://stackoverflow.com/questions/6018611/smallest-data-uri-image-possible-for-a-transparent-image).

Tested in IE6 - 10, Firefox, Chrome, Safari, and Opera and I didn't notice any adverse effects. Pull request: ​https://github.com/jquery/jquery-ui/pull/962

[TJ VanToll]

Menu: Add a transparent list-style-image to menu items. Fixed #8844 - Menu: IE 10 renders bullets in submenus

Changeset: 64a39d9b0d5710729653b185eae427853608744b

[TJ VanToll]

Menu: Add a transparent list-style-image to menu items. Fixed #8844 - Menu: IE 10 renders bullets in submenus (cherry picked from commit 64a39d9b0d5710729653b185eae427853608744b)

Changeset: 329974b2c6313fdbdceec1820bf7e687c8ae47ef

[philw]

This appears to cause problems on IE7 for SSL systems, giving a chap the old "this page contains a mix of secure and insecure items" problem we all used to know and love.

Yes, yes, I know only insane people and major governments use IE7, but it's supported, and those people (the insane ones I suppose) pay my wages. The issue is related to an IE7 defect, logged somewhere or other, where you apply an image using JS which is fully HTTPS served, but IE7 doesn't realise that, and barfs with the message. Government users cannot turn that message off, so that's no work-around.

My dirty hack to get my customers going again is to put an IE7 conditional comment in there which gets rid of the problem, comme ca:

.ui-menu .ui-meni-item {list-style-image:none}

Thanks to a bunch of government security, the powerful debugging tools of IE7 and the diminutive size of the system I'm fixing, that one line is worth a few quid, so I'll put it here as it may help the next person. I found it the hard way, but full points for marking the diff with this ticket number so I could come right here to make it messy.

I say "appears", because you made the change ages ago, and I only just hit the problem, so I'm a bit suspicious. Still, this fixes it. I just want to note what I found here, not to re-open this or anything.

[tj.vantoll]

Replying to philw:

This appears to cause problems on IE7 for SSL systems, giving a chap the old "this page contains a mix of secure and insecure items" problem we all used to know and love.

Yes, yes, I know only insane people and major governments use IE7, but it's supported, and those people (the insane ones I suppose) pay my wages. The issue is related to an IE7 defect, logged somewhere or other, where you apply an image using JS which is fully HTTPS served, but IE7 doesn't realise that, and barfs with the message. Government users cannot turn that message off, so that's no work-around.

My dirty hack to get my customers going again is to put an IE7 conditional comment in there which gets rid of the problem, comme ca:

.ui-menu .ui-meni-item {list-style-image:none}

Thanks to a bunch of government security, the powerful debugging tools of IE7 and the diminutive size of the system I'm fixing, that one line is worth a few quid, so I'll put it here as it may help the next person. I found it the hard way, but full points for marking the diff with this ticket number so I could come right here to make it messy.

I say "appears", because you made the change ages ago, and I only just hit the problem, so I'm a bit suspicious. Still, this fixes it. I just want to note what I found here, not to re-open this or anything.

Interesting, I just confirmed this at ​https://jqueryui.com/resources/demos/menu/default.html, and verified the behavior does not occur in IE8.

Technically, we could add a .ui-menu .ui-menu-item { *list-style-image: none; } rule, but since we no longer support IE7 I think we'll avoid doing that. Thanks for posting this here as it'll help others that need to support IE7 work through this.