1

I have created a small widget using jQuery UI and drag-drop plugins. Now, I am finding some issues with IE.

This widget can be accessed at - http://widget.adipa.com. At this URL, widget works well with IE7/8.

But when I embed this widget inside the iframe, as done here, it starts giving misaligning tiles. In the image show below, it can be seen that tiles are placed with little white spaces in between -

enter image description here

As seen here, between A and E, it has the white space.

You can check the widget in iframe here and without iframe here.

Steps to reproduce the error -

  • On first page widget - type 'Adipa' on first text box and click 'Next Step'.

  • On Second page, in design which is shown in middle, double click on any alphabet to remove it.

  • Just drag any alphabet from list of alphabets on left side. Drop this alphabet tile to empty space in design.

Above steps works well with IE without iframe and doesn't with IE iframe widget.

Is this because IE renders things differently with iframe and without iframe or is it issue with jQuery. Seems jQuery is doing quite a bit of hacks therein to support IE.

Thanks.

Improve this question

1 Answer 1

Reset to default
1
+50

I've tested your widget, and indeed it looks like a white space appears when you drag a letter and the drop it (even in IE9 which I tested in).

This is because of the doctype that's setup, and this will cause IE to render spaces differently than other browsers. For instance the following html:

<span style="border: 1px solid black">a </span>

(notice the space after the letter 'a'). This will render differently in IE vs e.g. Firefox since IE also renders the space. However, to make that go away, change the doctype for your document; nowdays I think we should go with HTML5 (as mr Resig discuss):

<!DOCTYPE html>

This will put the browser in standards mode, and make the space dissapear.

Another possiblity is to edit your HTML and remove ALL spaces within your element ...... Sucks, I know :)

Anyway, hope this helps!

Improve this answer
6
  • thanks @Fredrik, i tried with doc type you specified, but it still gives a white space. It seems for some windows machines it is rendering space for iframe-inside-widget only and onsite(widget.adipa.com i.e. not inside iframe) widget works well.
    – rtdp
    Commented Oct 16, 2011 at 19:05
  • Ok, could it be that IE on theese machines are set to 'Compability Mode'/'Quirks Mode'? Have you tried the all space-removal option?
    – Fredrik Johansson
    Commented Oct 16, 2011 at 23:58
  • if it were about spaces, then those would be shown on list of tiles as well as dropped tiles, currently it's there only for dropped tiles. so can it be something different?
    – rtdp
    Commented Oct 17, 2011 at 5:30
  • Really strange this one. But my guess was that since IE7 may render space/tab/crlf it would be that - an offset calculation problem... I really thought removing spaces should ultimately fix that (I've been there myself ).
    – Fredrik Johansson
    Commented Oct 17, 2011 at 12:54
  • When I render the page in IE9, I get "IE7 standards" for for the IFrame-version, and "IE9 Standards" for the non-iframe one. Please try to set the DOCTYPE-directive in the IFrame wrapper as well (the outer document). That should definitely do it!
    – Fredrik Johansson
    Commented Oct 17, 2011 at 12:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.