I'm currently designing some pages for a mobile site using mobilekit pro, and I've run into an issue in which sometimes images will display, and other times they will not. The image is loaded every time (the GET request succeeds) it just won't display on the page. I've isolated the problem to some css that gets added, but I can't seem to find where this takes place in order to fix it. When the image shows up, the tag appears like so:


<img style="max-width: 550px; display: block; margin-left: auto; margin-right: auto; width: 100%; height: 366px;" src="/Data/Sites/1/images/about/staff/staff.jpg" alt="" startwidth="550" startheight="366">

When it does not appear, the tag instead looks like:

<img style="max-width: 0px; display: block; margin-left: auto; margin-right: auto; width: 100%;" src="/Data/Sites/1/images/about/staff/staff.jpg" alt="" startwidth="0" startheight="0">

The issue, it appears, is that the max-width sometimes gets set to 0, which of course will not allow the image to display. The strange thing is that it is completely random which tag decides to show up. My hunch is that it has something to do with the way mobile kit pro attempts to resize images to fit the mobile screen, but I'm unsure why it (a) only happens some of the time and (b) where this resizing occurs.

Any help would be greatly appreciated!

Hi Joe, I figured it out. It turns out if you don't have width and height specified in the image, the resize function will sometimes treat the image as if its width and height are 0. Specifying a height and width for images in the HTML solves the problem. Still unsure on why it only happens in some cases and not others, but at least I have a workaround. Thanks for the help!