Thursday, May 5, 2011

Jquery Ui Sortable showing broken image in IE8.

I have a query sortable collection of images, ie. the items is set to img (due to the fact it is in a tab control and is a horizontal list, cannot be sorted on the list items, I just can't get it to work), which works perfectly everywhere except for IE8 (even in standards compliance mode), where the placeholder shows a broken image. Is there any kind of CSS setting I can use to make the placeholder invisible in IE8. I have tried

visibility : hidden;

I have tried setting the

content : url(transparent.gif);

neither seeming to have any effect. What can I do to fix this? Any suggestions on how I can even examine what CSS is being shown, as in Dom Explorer (or whatever its called in the IE8 developer tools) I can't see the img because as soon as I let go of the mouse it disappears and Dom Explorer doesn't seem to do real time updating the way Firebug does.

Edit: Here is the probelm duplicated

I over simplified my example, the other problem is that the whole tab is scrollable, controlled by slider. Changing

display : inline;


float : left;

doesn't work as we no longer have a scrollable list of items. Also for some strange reason, when there is a scrollbar and you use "li" instead of "img" as the target, the sortable stops working.

The updated example is at:

From stackoverflow
  • You could try: display: none;.

    Kris Erickson : I want the space to display, just not the borken img container. display: none will get rid of the space.
    Paul D. Waite : Ah, gotcha, sorry.
  • If you do not want to show a placeholder, make sure that you do not set the sortable's placeholder option.

    I see no problem with the default sortable behaviour in IE8. I've tried to recreate what you described in this hosted example: (The sortable images are in the third tab.)

    It would be helpful if you provided more code or just edit the sample I provided (via in order to duplicate the problem.


    In response to your comment, you can just set the items option to "li" and the problem is fixed. Also, I have to you use

    #images li { float: left; }

    instead of

    #images li { display: inline: }

    or else the image will be offset while you are dragging it.

    Here is the fixed demo:

    Kris Erickson : That's an awesome tool (, here is the problem duplicated:
    brianpeiris : Yup, is an excellent tool, especially for StackOverflow. The only problem is that it will delete code that has not been visited in 30 days, so it's usually a good idea to include the code and/or a description of the demo in your comments for future use.
    Kris Erickson : Once I get this sorted out, I'll include the code in the question for posterity. BTW I have moved all the javascript in the sample to the HTML portion just for clarity for when I add it to the question.
  • where the placeholder shows a broken image. Is there any kind of CSS setting I can use to make the placeholder invisible in IE8. I have tried

    the broken image appears because jQuery UI creates (in your case) an IMG element without src attribute set for a placeholder. To solve this problem:

    1. don't set the placeholder option or
    2. change your .showPlace class to something like

      .showPlace { margin: 20px; overflow: hidden; width: 0; height: 0; }

    the code above will hide the (non-existing) image content, but will leave the element visible.

    BTW. in my test-case, setting visibility: hidden to .showPlace also worked well

  • I fixed it up and reduced the code quite a bit.

    Main problem was you were setting the DIV sortable rather than the UL

    Seems to work just the way you want it :

    Kris Erickson : This works because you removed the placeholder option in sortable, not because of changing from DIV to UL. See .


Post a Comment