jQuery UI Dialog adding unwanted inline styles to images

Question

I am using JQUery UI to for the front end of a rails app I am developing. I am using jQuery dialog windows for displaying some tabbed data and inside one of these tabs I want to render some images.

The rendering of the images works fine if I view the page without Javascript, however for some reason when putting it all in a dialog window all but the last image that I render gets some inline styles from somewhere!

wihtout the dialog window:

  <img alt="Dsc_0085" class="picture" src="/system/sources/3/normal/DSC_0085.jpg?1260300748" />
  <img alt="Dsc_0006" class="picture" src="/system/sources/4/normal/DSC_0006.jpg?1260301612" />

with the dialog window:

    <img alt="Dsc_0085" class="picture" src="/system/sources/3/normal/DSC_0085.jpg?1260300748" style="height: 0px; width: 0px; border-top-width: 1px; border-bottom-width: 1px; font-size: 22px; border-left-width: 1px; border-right-width: 1px; display: inline; ">
    <img alt="Dsc_0006" class="picture" src="/system/sources/4/normal/DSC_0006.jpg?1260301612" style="display: inline; ">

I can't work out why putting the images into a dialog window is giving them inline styles with height and width of 0px, does anyone have any ideas?

Answer 1

I have no idea, but you can override it using !important in the CSS (double-check IE6 on this).

You can also try to put something like $('img.picture').removeAttr('style') in the modal event.

Very odd to put display:inline as inline style, since images are displayed inline by default... but I'm sure the UI team has their reason.

Answer 2

I am having the same issue using struts-jquery, all the img tags get that crappy inline style when inside a dialog, where you able to solve this oliver ?

Answer 3

In the end I just used !important in my style sheet to override the inline styles that jqueryui was adding. I never got to the bottom of why they were being added though.