I want to display the following symbol : "\ud83c\uddfa\ud83c\uddf8"
This, in HTML, is supposed to display the flag of the USA. The first half displays "U", and the 2nd half displays "S". Put together, it displays a little symbol of the flag (by a mechanism I'm not sure about). Well, it does in Firefox at least. It doesn't in Chrome. In Chrome, it just shows "U S".
I wish Chrome could work as well as Firefox :D
But stats tell us a large proportion of Internet users use Chrome.
Any idea what I am missing so Chrome displays the flag symbol ?
I initially had this in the index.html head :
<meta charset=utf-8">
Another SO comment mentionned it had to be replaced with the following, but that doesn't fix the issue.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
EDIT : this link indicates there is no fix. The way would be to use images (.png/.webp/.svg) instead. This is a bit dumb. I feel like the unicode solution would be the lightest.
[...] "\ud83c\uddfa\ud83c\uddf8" This, in HTML, is supposed to display the flag of the USA.
No "\ud83c\uddfa\ud83c\uddf8" in HTML is supposed to read "\ud83c\uddfa\ud83c\uddf8".
HTML uses HTML entities, the ones for this glyph are 🇺🇸.
🇺 + 🇸 = 🇺🇸
Related
Some of my CSS wont work in IE8 but will work in chrome,firefox,IE11.
I first made the website on chrome and then realized it didnt work in ie11 so I put code into the html like the code below...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
After putting this, my website works on ie11. Later to find out, that it does not work on ie8.
I am making this website for my company and all around the company ALL the staff use different browsers, so I need to make sure it works on all.
Do I have any hope? or do I have to give up on this one? I have researched all over google about everyone different code inserts they put in for it to work on ie8 but it doesnt work.
In my CSS im using stuff such as border-radius and box-shadow and many many more.
Is there an alternative... to say, "if you are using ie8 to display this website, display this piece of code differently to suit the browser."
Thanks
What you are basically looking for is "graceful degradation". Check out some articles about that here:
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
http://searchnetworking.techtarget.com/definition/graceful-degradation
In any case, keep in mind that making a modern page work on IE8 is a tedious task, and most likely unnecessary. The global market share for IE8 is currently around 1%, so you really have to consider if you do that extra work.
I am trying to find a solution of the IE white flash in a meteor app.
The website is this one (note that it's in closed beta).
IE9 gives a very bad user experience, and while I don't think it will ever be as good as with more modern browser, I really think some issues should be resolved.
And I think that the white flash on page change it's the worst one.
Basically for every action that changes the url, the page redraws itself and flashes white for a few milliseconds.
I've read other topics and tried to apply some of the suggest fixed, but nothing worked.
I've tried to insert
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
But I think it does nothing on IE9 or in this case.
I also tried to set the background of html and body to dark gray, it did nothing.
I'm actually not sure what else should I try and if this is a common issue when building website with realtime, modern frameworks.
Thanks in advance.
P.S. I also found this issue in iron-router, and it seems that IE<10 trigger a full page refresh every time, and probably that's the main cause of what I'm seeing, because Meteor needs a bit of time to load itself, thus leaving the page blank while it's doing it's magic.
this meta tags
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
not supported in IE9.
As solution for you example you can use compatibility with IE8
you can add
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I've spent the past few hours trying to fix several issues and confusing myself.
When the site is viewed in IE8 it appears to go into quirks mode, I say appears as I don't have access to that machine, only a screen print but to replicate the mess I had to select Quirks form Dev tools.
The site is a fairly complicated one. At the top of each page a php init file is called and so on.
The index currently looks something like:
<?php require'core/init.php';?>
<?php include_once 'include/IE8Etc.php';?>
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
The IE8Etc and IE=Edge are recent additions. I then read that IE will enter this mode if the doctype is not the first thing it sees and that comments can cause problems.
Does this apply to the php I have before it? Should my doctype declaration stay where it is or should it be moved to the top of the init page. Even as I write it it sounds like a ridiculous question and I'm sure it's fine where it is but I need to make certain.
Thanks.
The point you mentioned in the question about the doctype needing to be the first thing in the page applies to the page as it is seen by the browser.
The content of the PHP code is entirely irrelevant, if it doesn't generate any output.
However, if the PHP is generating output -- even if that output is nothing more than a blank line -- then it will be making the doctype invalid.
So the first thing you should do is open the page in your browser, and select the 'view source' option. look at the actual HTML that the browser receives. If there's anything before the doctype, then it needs to be moved or removed.
Once you've done that, the second thing to do is run your page through the W3C Validator. This will tell you about any other HTML errors you might have on your page. You have at least one, as the <meta> tag needs to be inside the <head> tag, but there may be other errors too. It is possible for some HTML errors to throw the browser into quirks mode, so you should fix anything that is reported by the validator (although the doctype issue is by far the most common cause).
Hop that helps.
The Problem
The linebreaks after both of the <?php ?> snippets are counting as characters. If Internet Explorer detects characters (even whitespace) before the doctype declaration, it enters quirks mode. As EricLaw correctly states, you should also consider moving all your meta tags into the head section, and consolidating your php code.
The Solution
The correct code would look like this:
<?php
require'core/init.php';
include_once 'include/IE8Etc.php';
?><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Title</title>
The whitespace in front of the DOCTYPE may come from the BOM (byte-order mark) at the beginning of files saved in UTF-8 encoding with BOM. After removing the BOM (save as ANSI as UTF-8 in Notepad++), the DOCTYPE was correct, but it still went to Quirks mode until the meta tag/header for IE-Edge was added.
In Internet Explorer, I keep coming across these strange diamond symbols whenever a certain character is on the screen. These characters are copied from Wordpress and are typically a long dash or an apostrophe.
Here is what these diamond characters look like: http://imgur.com/teheGy4
Whenever I change IE's encoding setting to 'Western European' it fixes the problem. See here: http://imgur.com/OmVTaJ0
So I changed my meta to reflect the 'Western European' setting
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Still no luck in IE, however it did fix the problem in Firefox. Any suggestions on what else can be done to fix this?
You'll have to get the corresponding ascii code and use that in place of your special characters.
I am using HTML5-Reset in my pages in a ColdFusion application. The head tag looks like this:
<head id="swipeapp" data-template-set="html5-reset">
There is also a <cfform> in the page. Browsers ignore data-template-set and id and print the content on the browser itself. I figured out that this is because of <cfforms> and found that adding <cfcontent type="text/html; charset=utf-8"> solves this problem.
With that change, the page works on Chrome and Firefox, but the html5-reset also gets removed. The alignment and styles go for a toss in IE 7 and 8.
Is there any work around to keep the html5-reset and use cfforms?