I have a web page, the problem is that IE and MS-Edge doesn't seem to load some images. Hence I tried working on just one image, given below. This also doesn't get displayed. Everything works fine in Firefox, Chrome and Opera. Could you please tell me what the problem is??
the image
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="./images/services/2.jpg" />
</body>
</html>
js fiddle
I suggest you double check the path of the image. Maybe it helps if you drag 'n drop the image directly to IE or Edge and have a look at the address displayed in the browser...
Related
In a minimal HTML page with <img src="example.png">, I only see the original quality if I zoom to 80% - reproduced in Firefox, Chrome, and Edge. Using srcset="example.png 1.25x" fixes this.
This appears to be due to changing my system display setting (Windows 10):
yet, other sites work fine. I've read that one way's to provide multi-resolution images via srcset, but suppose that's not an option. (I tried providing the same image at 1.25x, which worked for me, but broke it for a user with 100% system zoom.)
How else can I address this? It's just about resizing the image appropriately, but don't know how to do this portably with HTML/CSS.
MRE: Code + image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<img src="example.png">
</body>
</html>
^ this is blurry for me unless I zoom to 1/1.25 = 0.8.
Images does not display in firefox and in chrome. Safari works fine. I code the image as a background image in CSS and coded the image in HTML. When I preview the page, the image can only be seen in safari. Why? This occurred when I bought a new computer.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="img/background.png" alt="">
</body>
</html>
I found out why the image was not showing in firefox and chrome. The image itself was getting errors. I found out when I tried importing the image into photoshop, photoshopped has an error message saying "Could not place “background.png” because the file-format module cannot parse the file." So I made a new image in the html, and the image displayed on the browsers.
I am working on a ASP.NET website and in a panel I show help descriptions.
These help descriptions are created by someone else in HTML.
Mostly its a paragraph and in one occassion there is an image.
Here it is going strang with FF.
the HTML is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="font: 14px arial;">
<p>Make reservations on EMTU assets</p>
<img src="9901_files/image002.png" alt="" />
</body>
</html>
The page file tree is like:
root / requestdescriptions / 9901_files
The HTML file is in 'RequestDescriptions' and is called "9901.HTM".
The image is in the '9901_files' folder.
In IE and Chrome the image is shown. So no problem there.
Then there is FireFox.
If I look at the webconsole in FF, I notice that the image is not found as FF tries to get it from 'root/9901_files'. Why is it not looking in 'root/requestdescriptions/9901_files'???
rg.
Eric
Probably firefox is starting in the root when looking for an image. You could try adding ./ before the "file_src", so firefox starts in the same directory.
What if it says the following for your image code:
<img src="./9901_files/image002.png" alt="" />
Found it.
Thanks to Rober Deiman, I found that the calling link had a backslash instead of a forwardslash in the link.
Apparently FireFox doesn't correct it like Chrome and IE.
I'm having trouble with showing an image on an iPhone. Currently, I have a pretty large image, around 9000x4500. I'm trying to show this image resized in an iPhone. I'm working with the simulator now and it just will not show up. I have some pretty simple code here (using phonegap):
<!DOCTYPE HTML>
<html>
<head>
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova.js"></script>
<style>
img.Image {
width: 100%;
max-width:100%;}
</style>
</head>
<body>
<img src = "FloorPlans/plazaone.png" class = "Image" />
</body>
</html>
And here's a screenshot of what my simulator looks like:
Anyone know how to fix this issue?
Figured out why it wasn't working. It seems that if one tries to put an image on iOS through HTML, there is a certain limit of what resolution it can handle (not for jpgs it seems, but for GIFs and PNGs, might have something to do with transparency). All I had to do was resize my pictures down to 50% of their original size and they worked.
I've got this weird issue going on. I'm using Codeigniter 3.0-dev and Smarty 3.1.4 in the backend, but I don't think it's relevant.
I have this really simple html:
<!DOCTYPE HTML>
<html>
<head>
<title>some page</title>
</head>
<body>
asd
</body>
</html>
now. when I view the source of this page, on any browser (tried Opera 10.52, Firefox 7.0.1, Chrome 14 and 15, IE9) the markup is exactly like above. now, when I use firebug or chrome's dev tools it moves the title tag in the <body>, and if I have meta or anything else in the <head>, it moves those items in the <body> aswell. firefox's firebug shows me this:
<html>
<head></head>
<body>
<title>test</title>
asd
</body>
</html>
why does this happen? any ideas, at all?
Elements that appear to be in head in the mark-up, can end up inside body in the DOM, if the parser sees something before the moved elements that is only permissible in the body of HTML. For example, a double BOM (byte-order-mark) at the start of the file may not show up in View Source, but will cause the parser to think that it has entered the html body section, and all the head elements in the mark-up will end up in the body in the DOM.
What Alohci said, plus both Firebug and the Chrome debugger often move things around to suit themselves. The source then looks wrong when viewed in those debuggers.