image link in html not correct in FireFox - html

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.

Related

How to add image in HTML from a link?

I would like to add the image present at this link http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-22-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295826 to my html page. Therefore, I have added the above URL to the "src" attribute in the < img> tag. My HTML code looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-26-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295828">
</body>
</html>
However, the image is not displayed when I render the page, and this is what I see.
blank page
What I expect to see instead, is the image at the link correctly displayed on my html page. Any idea what is wrong and how I could fix it?
NOTE: I know I could download the image locally and then add it, but I specifically need to find a solution to add the image from the link, and not from a path on my local computer.

Image not displayed in IE 11 and MS-EDGE

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...

html5 img not displayed in gedit

I am trying to learn HTML5 and I wrote a code in html to display the image.
Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>imageDemo.html</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>This is Pacman Ghost</h1>
<p>
<img src="Pacman.png" alt="Pacman Ghost" />
</p>
</body>
</html>
My image Pacman.png is on the desktop and my test.html file is also on the desktop. I am using gedit in ubuntu 14.04 to write the code. When i run my file test.html, I don't see the image but see Pacman Ghost as text.
What am I doing wrong here??
Hope to hear soon from you guys.
Thanks
You wrote that you image is on the desktop. You use an relative path. So the best way is to make a folder and put all your files in that folder.
Your code looks correct but i think your your image is in the wrong place.
And you should have a look at the case sensitivity of your file.
Use the debug bar in Chrome or Firefox and go to Network to find some problems and look if the code isn't loading.
Solution remove the space between filename and .png extension.
https://developer.chrome.com/devtools
Try not closing the tag and adding height and width of the image.
<img src="Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >
Also check if the filename is correct. It might not be able to find your Pacman.png. Try to use an absolute link if possible.
Edit: Absolute path with ubuntu:
<img src="/home/(your user name)/Desktop/Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >

Why does Chrome Developer Tool add elements not in the file?

When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.

weird issue with html: markup is correct but dev tools show <title> moving to <body>

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.