image not displaying on mobiles - help wanted

[eFestivals]

I've encountered a problem with this website which I can't find the solution for. I'm hoping that one of you smart guys might be able to help...?

There's a page here:-

http://www.efestivals.co.uk/festivals/glastonbury/2013/sitemap.shtml

... which includes a large (in pixel size) image. The image is set-up (tho I guess wrongly somehow) to display at the maximum size of its parent container.

It displays as expected in desktop web-browsers, but on various phones and tablets and emulators it's been tested on that image is not displaying - there's just an empty space.

I've done loads of googling without finding the answer why.

The image is using some CSS for its formatting, specifically:-

.bigimage img {

width: 500px;

}

I've tried using that CSS both as a div wrapped around the image, and [when formatted appropriately] as a class applied directly within the img tag. In both cases it displays properly in desktop web-browsers but not on mobile web-browsers.

Is anyone able to tell me how I might fix this?

Thanks.

[SimonEvans]

The mobile code doesn't show the same as the desktop code i.e it shows the following code

<br />
<b>Click on the map image below to load a really big (2194 x 1344 pixels) view of the map!</b><br />
<br />
<a href="/img/fests/glasto-sitemap-2013full.jpg" target="_blank">
</a><br />
<br />

It doesn't even show the image or DIV. It doesn't show the following at all

<div class="bigimage"><img src="/img/fests/glasto-sitemap-2013_962x589.jpg" alt="Glastonbury Site Map 2013" /></div>

Edited May 30, 2013 by SimonEvans

[eFestivals]

thanks .... but it's not 'the webpage' which doesn't have the div, etc, - because if you load the mobile version of that page in a desktop browser it's can all be seen.

The issue is something to do with a difference in the browsers (desktop vs mobile) themselves, but I've no idea what.

[SimonEvans]

Mobile emulators on desktops aren't all that reliable because a bunch of other stuff is sent beyond the user agent string in the browser

Sorry, I did mean to say that it seems the issue wasn't down to CSS mainly because in the first snippet of code, the container doesn't actually exist. Have you tried stripping the page down entirely so it just has the relevant CSS file and the DIV and then building it up from there to see if there's a breaking point?

How about trying this instead

<div class="bigimage"><a href="/img/fests/glasto-sitemap-2013full.jpg" target="_blank"><img src="/img/fests/glasto-sitemap-2013_962x589.jpg" alt="Glastonbury Site Map 2013" /></a></div>

Edited May 31, 2013 by SimonEvans

[eFestivals]

How about trying this instead

<div class="bigimage"><a href="/img/fests/glasto-sitemap-2013full.jpg" target="_blank"><img src="/img/fests/glasto-sitemap-2013_962x589.jpg" alt="Glastonbury Site Map 2013" /></a></div>

nope - I've already tried every combination of applying the class in the various places.

It's something to do with the image/image-tag itself I think, because it still doesn't display even if the div and href are both removed from around the image.

Edited June 6, 2013 by eFestivals

[eFestivals]

The problem is in the Mark Up.

while that might be true, the mark-up is working as expected for any browser apart from mobile ones.

It's the browsers that are causing the issue (perhaps because it doesn't like the markup/css), but I've no idea why.

[eFestivals]

The poster above is correct. If you visit the website on a mobile device this is what is outputted....

NOPE!!!

What is outputted is good code (at least, for a desktop browser).

It's not what is outputted that bad, it's what mobile browsers do with what is outputted.

The webserver is outputting the same thing (apart from the page skin) no matter which browser or device is being used.

It's what the browser is doing with what it receives that is the issue.

[eFestivals]

It IS the webpage... I know you use some third part tool to help you do cross platform deving... and I reckon its changing the output depending on the device.

NO NO NO NO NO!!!

All of the code has been hand-crafted by me. The CSS & HTML for the page body (rather than the skin around that content) is identical on this page no matter what browser or device is used.

If you simply open the link in a desktop browser you will get a different version than you see on mobile.

yep, but that's the result of what the browser does with the code, not the code itself.

If you actually view the real source on a mobile device.

what you are viewing is not the real source!!!

What you are viewing is what that browser has decided is the source. It's not what the browser receives.

[eFestivals]

Simply wrong... I tested it this morning and the output is different for mobile devices as two of us have confirmed.

It is missing the DIVS and Image... Its just outputting a hyperlink...

No, you're simply wrong.

I've hand-written every single line of code for the new site, so i know what is being sent to the webserver.

Unless apache has something built in to strip out code that is being given to apache, then I can assure you 100% that it's something that's happening within the browser.

[eFestivals]

It's definitely happening within the browser.

It might well be the case that it's dodgy html &/or css which is causing it to happen within those mobile browsers, but it's happening within the browser.

[eFestivals]

Me and four other developers are sat here laughing at you now

Mobile browsers changing the source LOL

Then laugh at yourselves.

[eFestivals]

We are laughing even more now

As I said, laugh at yourself.

Your testing coincided with me trying stuff at this end, which is why you got the result you did.

It was an html/css error. I'll let you google down the answer if you ever hit the same issue.

[eFestivals]

Or you could provide the full technical answer to show you aren't full of shit

Or I could just leave you in ignorance.

[SimonEvans]

This would be the first time since I've worked in web (and specifically mobile) development that the actual browser has been blamed for removing code on-the-fly. I tend to code things properly (hehe)

I would have personally asked on stackoverflow.com

I'm not going to get involved in your playground tittle tattle but I am inclined to go with "Barry Fish" on this one. I would genuinely be interested in what the actual problem was and the solution behind it.