I am trying to display an image (gravatar), but the ampersand in its link seem to be problematic.
At first, I had:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>& in url</title>
</head>
<body>
Link to image
<img src="http://www.gravatar.com/avatar/f14e8ce12e7d7ffc11fe8a29127030da.jpg?d=mm&r=r" alt="display image">
</body>
</html>
The link (<a>) works fine this way, but the image (<img>) won't show. And of course it doesn't pass the w3c validation.
I encoded the ampersand to &, but the result stays the same (except for the w3c validation which is OK). I even tried a urlencoded version (via PHP) with no luck.
Any idea on what I am missing?
Edit: Nothing to do with encoding, this time. Ghostery (Firefox addon for privacy) was blocking gravatar images... Sorry guys and thanks for your help.
Your image is not dependent on URL parameters and it even works without any get parameters.
As It is mentioned in the comments, your problem is not with the URL, but with loading the content.
Related
I have a simple piece of text like so:
<h1 class="intro-text" id="main-title">‘AN ABRAM’</h1>
This should render the following output (this is correct in Google Chrome):
But when I open the same file in Safari the output looks like this:
Why is this happening and how do I make sure this doesn't happen?
There may be a few issues of why your text is rendering differently in different browsers.
1. HTML charset not set to utf-8
This is a very common solution for your issue. Sometimes, the unexpected character rendering occurs when the charset isn't set to utf-8.
According to MDN Web Docs:
charset - This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.
In short, the charset attribute defines the character encoding, and what each character will "render" to.
To add this in your HTML, you need to add it in your <head>, like so.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 class="intro-text" id="main-title">‘AN ABRAM’</h1>
</body>
</html>
This should state that the encoding of the HTML document should be UTF-8. This way, Safari shouldn't print out the characters in a different way.
Note: There are known issues of Safari encoding the text differently than Google Chrome, so this solution is most likely the best fix.
2. Fonts (OP's working solution)
Another issue that could occur is the fonts that have been chosen to be on the webpage.
Sometimes, fonts can be the reason Safari doesn't render the symbols like normal. This can be for many reasons.
However, to see if fonts are the issue, then you should remove all of the font-family specifications in your CSS.
* {
font-family: "Some-Font"; /* Try and remove this */
}
The default font in a HTML document (if it isn't specified) is Times New Roman. If the issue doesn't occur after changing the font, then the issue was the font. In this case, you would need to find another font to be in your HTML document.
3. No DOCTYPE
The third issue in this list is no <!DOCTYPE html> at the start of your HTML.
Even though this solution may not be related to your issue, this is a good thing to try.
If you don't have the DOCTYPE, you need to add it in the location specified below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Title!</h1>
</body>
</html>
Shown on Line 1.
This may help solve the issue.
In conclusion, these are the three solutions. They are ranked from most likely to fix, from least likely to fix.
HTML charset not set to utf-8
Fonts (OP's working solution)
No DOCTYPE
These should fix your problem.
According to the documentation and many posts, the tag
must save a file, however for me it just opens an image in a browser: chrome, firefox, safari.
download. Prompts the user to save the linked URL instead of navigating to it.
What should I do to force downloading to a drive, without JS?
Minimum working example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
download
</body>
</html>
This link might be helpful . From Chrome 65+ download tag is discontinued. It is accepted only when it is from the same origin.
Problem here is, It uses JS. So, It is not completely independent of JS.
I am in the process of building a website and the browser keeps rearranging my HTML for some unknown reason. This is my code:
<DOCTYPE! html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
And here is a screenshot of what the browser uses:
(Sorry, don't have enough reputation to insert a real image)
This is all fine except when I want to use link to link an icon to the page, and it won't display unless it's in the head (I used the browser's dev tool and literally dragged the link up to the head and watched it appear immediately)
I've checked the source using the browser's developer tool and it looks exactly the same as in my code editor, so I know my web server isn't messing with it.
It does the same in Chrome and Firefox. It appears that they both use the head for script when a browser extension decides to put it there, but it does this even with no browser extensions.
I have tried the Notepad++ Encoding -> Convert to UTF-8 trick to remove the BOM character which supposedly fixes my issue but that did no good.
So how can I make the web page display as I wrote it?
Here is a download link to the file with the code snippet seen above:
http://www.filedropper.com/testpage_1
Thanks for any help!
Your Doctype is invalid. Error recovery is causing it to be treated as text. Since text is not allowed outside the body, it implies the start of the body element.
The correct syntax is:
<!DOCTYPE html>
The exclamation mark needs to be the second character.
This would have been picked up if you had used a validator.
I created a test page with your code and I can confirm that the developer tools show it like that. However, there is a typo in the DOCTYPE. Change the code to the following to fix it:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is some text</p>
</body>
</html>
The difference is that the exclamation mark needs to be before DOCTYPE, not after it. See The DOCTYPE in the HTML5 specification, which also points out that <!DOCTYPE html> is not case sensitive.
I am doing some work that would require me building up html inside of embedded iframes. Sort of like jsbin does.
However I'm stumped with my very first spike.
How come my html isn't being rendered when I put it inside an iframe?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<iframe>
<html>
<head><meta charset=utf-8 /></head>
<body>
<h1>Big Header</h1>
</body>
</html>
</iframe>
</body>
</html>
Here's my jsbin.
Additionally when I tried drawing some svgs inside the iframe with d3 they came out looking all weird and not scaling. After opening dev tools and editing the svg text as html I found that even adding a non-meaningful space anywhere would get it to redraw and render correctly. So bonus points if anyone can tell me any resources I can read up on cause clearly iframes don't work like I thought.
iframes need to be pointed at a page to load. you don't put html between iframe tags. if you put anything between iframe tags - it is text you want to display in the case the browser the client is using doesn't support the tag. you should make the html above its own local html page, and point the iframe src attribute above to point at that web page.
After a day of research:
Like Mike said, html inside an iframe is for the case the browser does not support iframes and will not show up otherwise. However, it IS absolutely possible to construct a document inside an iframe on the fly and without a server-side query. To do this, you have to use javascript to construct the document. You can get a reference to it and write html like so:
var iframe = document.getElementsByTagName('iframe')[0];
,doc = iframe.contentDocument || iframe.contentWindow.document
;
doc.open();
doc.write('<p>Some html</p>');
do.close();
Note that as Remy mentions here the document must be opened before writing and closed after.
Ridiculous simple HTML-file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="refresh" content="5; URL=./test.html">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
When I open the file with any browser, the browsers behave well and reload the page every 5 seconds.
But when I refresh the page manually between two refreshes (F5), the IE (V 8.0.6001.18702) doesn't evaluate the meta tag anymore and the page gets no longer refreshed. Opera, FF and Safari still work as expected and refresh every 5 seconds.
Has anybody else experienced such a problem? How (apart of using Javascript, of course) could this issue be solved?
Edit 1:
Verified this behavior also on IE6, so I guess it's a general IE problem. Any hints how to overcome this?
Edit 2:
To keep that topic going:
is that a known problem or would it
be worth to file a bug ticket
somewhere (where?)?
Could someone
verify that behavior with IE7 and/or
IE9?
In IE 9 it works fine.
P.S. you missed a few quotation marks should be:
<meta http-equiv="refresh" content="5;" URL="./test.html">
As far as i know theres only the mta or javascript way.
Another option might be to use
header("Location: url");
if you can use php, its not really a refresh in it common way, but you could use to redirect to the same page again
As with the meta way, did you tried to put a full url? ( IE, arrg )
Generally speaking, use of the non-standard META-REFRESH is frowned upon by the standards bodies. Having said that, did you try with a fully qualified URL instead of the relative URL? If you're trying to reload the same page over and over again, did you try omitting the URL entirely?
Use this, I suspect your URL is not setup correctly
<html>
<head>
<meta http-equiv="refresh" content="1">
</head>
<body>
</body>
</html>
This always refresh itself.
Hope helps
:)
Javascript is going to be your friend for this one... it ends up working a lot better across browsers for the most part. Besides, meta-refresh is going out of style.
The following script and body onload attribute will continuously refresh the page every 5 seconds.
<html>
<head>
<script>
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
</script>
<noscript>
<meta http-equiv="refresh" content="5" />
</noscript>
</head>
<body onload="javascript:timedRefresh(5000)">
<!-- Content -->
</body>
</html>