Preview Image shows differently in Chrome only - google-chrome

This is the site:
http://grafistas.com.gr/perle/?page_id=105
If you open it and go hover over a product title an image will pop up. In all browsers seems to be okay.
But in Chrome the image is way at the left.
Inside the js file, the xOffset is positive number but the yOffset is a negative number. Does Chrome not understand negative numbers?
I also read somewhere that a possible fix would be to load the js file at the very end so that the image could be loaded and Chrome would read its width/height. I tried it but nothing changed.
Anyone knows what's wrong?

I changed the class that the preview image was embeded and now it works perfect! Thanks me! :P

Related

Background Image Not Showing in Chrome, Firefox

I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.

Firefox 42000x280 image not showing? What are Firefox's maximum image dimensions?

I am trying to display a 42000x280 2.46mb image that will not display in Firefox, but it works in Chrome + IE. The image can be found at http://tpupower.net/tron2.gif
The image is made from an animated gif and I saved it with PHP's imagegif(). Could this be a color profile error? How would I check that?
The image won't open in Photoshop either, I don't know if its because of the dimensions or what. The error it gives is below.
"Could not complete your request because of a problem with the file-format interface."
It is a fact that firefox and photoshop can't open it,you should use GIMP(GNU manipulation program) and scale image..GIMP is free and open source image manipulator.you can scale or decrease quality of image.I am sure it will open in GIMP.
you can download and get more info. from link:
http://www.gimp.com/
hope this will be helpful.

Why do my webpage images appear sideways in my HTML but correct when in full screen?

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.

Image not showing up in IE8

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 -

IE7 png images loading but appearing with the 'image not found' red x

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.