On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -
Related
I'm using visual Studio Code and using live Server to see what it looks like as I'm coding.
Here's the dilemma I'm having. After coding it looks great on live server.
But when I open it directly into a browser (I've opened in chrome, firefox and explorer), everything works except the images doesn't show. (my background image, logo, icons, pictures will not display).
I transfer all files to my other laptop and same result
All my images are in CSS using the background attribute. Everything else works, font color, shadow, border, hover etc. except the images wont display (except in live server). Has anyone else have this issue and if so, how did you resolve it?
I've attached a screen capture of my code...I commented out all information in body. commented out the other css file and commented out all css code except for body tag, should work, but still will not show the body image. the picture file is located in the same location as the html file. I've used quotes and without quotes around the url address and same results.
I used my other laptop and coded the same thing on that (except using different image) the image worked on that one.(used visual studio code on that laptop as well)
I'm at a lost as to why this is happening. any help is appreciated. as I really dont want to have to re-write the html and css again.
html and css code
Does your Webserver have the permission to view the image?
The way you wrote your css implies that the image is in the same folder as your .css file.
If it is not so do it like "../path/to/file.jpg"
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
Hi I'm testing a Wordpress site I've built, a problem I have is for some reason the Art Below logo which appears just about everywhere else, doesn't show in IE7, IE8 and Android.
Anyone with fresh eyes want to take a look?
Its the footer first logo on the left.
http://www.missingtom.com
Looks like it's a CMYK jpeg. Convert it to RGB and give it a try if it works.
I tested with IE8/7 and indeed it doesnt's show up, shows a red circle, loads just fine with other browsers.
Edit: Here is RGB version of your file - http://i.imgur.com/N8K33he.jpg if you don't know how to do it yourself or you're unable to. Rename it to artbelow.jpg and replace the file on your server (http://www.missingtom.com/wp-content/themes/artwars2/images/artbelow.jpg) make a hard refresh (alt+f5 usually) and see if it shows up.
More info about CMYK and IE (possibly also Android browsers as you stated?... - http://www.plaveb.com/blog/cmyk-images-not-displayed-in-internet-explorer
Below is an image of the problem.
I've tried correcting the folder permissions to 755, i've tried setting exact paths, i've tried removing all of my styles and nothing works.
Background png images seem to load fine.
There are some flash elements on the page (top and side nav)
Any help would be much appreciated. Thanks in advance.
Are you sure there isn't some script applying the png fix for IE6 to IE7 accidentally? In this case it would be inserting an images/blank.gif file to make the area "clickable" in certain cases and compensate for lack of png. Though it shouldn't target IE7 since it natively supports it.
You can probably use the Developer Tools or search for any "blank.gif" references in the file(s) you're using and just throw it up there or somehow disable the png fixing thing.
I am building a new site, and I have a folder on desktop with everything in it. For testing basically I open the index page in a browser and preview that way while building it. It looked correct in firefox, safari, chrome and opera on my mac. I uploaded that file to the server, and now firefox on mac displays everything much smaller. Like all size decreased by 200px in width and fonts got small too. The other mac browser show it fine.
I had 4 style sheets at first, a main one then separate ones for other pieces, I combined all into one still no change. Initially I reset font to 100% and then set a base font of 62.5% and adjusted sizes with em's. Someone said that could be culprit so I tried changing to pixel values. No change.
Any idea what I can check why it only changes in one?
Thank you.
Is it possible that you just changed the zoom on the browser?
Reset it in view->zoom->reset
The web version could be cached. Try deleting it!
Make sure that the off-line local copy is still in the same condition as you left it. Then delete all the uploaded files from your webserver, and replace them with the desktop files.
There's a chance that, as Fiarr suggested, your browser is doing something weird with the cache, so ctrl+F5 to deal with that. Goog's suggestion of the zoom being different for your online site is probably the best, but, just to be sure, use Firebug to see what's happening and where the crazy-styling is coming from.
Failing that, you might consider posting a link to your site so that we can see what's actually happening, rather than guessing.