Jquery Ui Sortable showing broken image in IE8.

Question

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 http://jsbin.com/irozu

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

display : inline;

to

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: http://jsbin.com/ahawi.

Answer 1

You could try: display: none;.

Answer 2

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: http://jsbin.com/osobu (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 http://jsbin.com/osobu/edit) in order to duplicate the problem.

Edit

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: http://jsbin.com/osezu

Answer 3

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

Answer 4

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 : http://jsbin.com/egiwu