CSS formatting showing in IE but not Chrome or Firefox - html

This one is stumping me, as I've searched and searched through similar issue topic threads on this site but none of them are helping me resolve the issue.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>Β© Mystwood Publishers Limited</p>
</body>
</html>
and the below CSS file code in my main.css file in the same directory as my HTML file (C:\HTML)
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
The text formatting works correctly when I open the code in IE, but not in Chrome or Firefox, what might I be missing about these two browsers that could be causing the issue?

Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)
To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.
To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).
The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.
To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>Β© Mystwood Publishers Limited</p>
</body>
</html>

This also stumped me for a long time - Page looks okay in Edge\IE11 but not Chrome or Firefox. Eventually found there was nothing wrong with the HTML or CSS syntax. The fix was simple. The HTML file was encoded in UTF-16. I overwrote the file saving it as UTF-8. It now works fine in all four browsers.

Related

How to write color Unicode emoji in the IE

I want to write colored Unicode emoji in IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
πŸ˜ΊπŸ˜ΈπŸ˜ΉπŸ˜»πŸ˜ΌπŸ˜½πŸ™€πŸ˜ΏπŸ˜Ύ
</body>
</html>
If I run the code above on chrome and edge, it comes out as a colored cat face emoticon.
But in IE, the emoticons come out all monochrome as below picture.
How to use color Unicode emoji in the IE browser?
I'm very sorry for the basic question.
But I didn't know which keyword to search for it.
Thank you for reading the questions and I hope you have a good day.
Actually, I strongly suggest leaving IE alone, since there is no propper support on it anymore. But if you insist on doing this on IE, Microsoft provided a way to deal with this issue. It may seem tricky but AFAIK, it is the only way to make the emojis work as expected. So apparently, Microsoft polished emoji live in a specific system font named Segoe UI Emoji. In order to use it, you just have to define a class or something and then assign it to your specific elements with emojis.
So Your final code should be something like this:
.emoji {
font-family: "Segoe UI Emoji";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<span class="emoji">πŸ˜ΊπŸ˜ΈπŸ˜ΉπŸ˜»πŸ˜ΌπŸ˜½πŸ™€πŸ˜ΏπŸ˜Ύ</span>
</body>
</html>
NOTE: As #mplungjan told us in comments if you want to be more precise with cross browsing functionality you can use below one instead:
.emoji {
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

h,b and sup tags do nothing + more problems

For the past hour I've been trying to figure out:
why can't I edit text inside HTML;
why h or b or sup tags won't work for me;
If I set a font-size for the h2 (to make them work how they were supposed to), then that font-size won't change when re-scaling the size of the window.
Why is the font size of h tags static if I made a rule in css that should re-scale all of the body's font-size according to that formula (which is not mine) ?!
I am a complete noob ! What I wrote there is what I took from https://www.w3schools.com/ and https://css-tricks.com/viewport-sized-typography/ .
#Buton1 {
background-color: darkorange;
color:white;
text-aling: center;
text-decoration: none;
padding:
}
#whole {
font-family: sans-serif;
color: white;
background-color: black;
}
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="reset.css" type="text/css" rel="stylesheet">
<link href="Style.css" type="text/css" rel="stylesheet">
<title>PlantAnApp</title>
</head>
<body>
<div id="whole">
<div class="Module_1">
<h2>Think an app.</h2>
<h2><b>Plant an app</b></h2>
<h2>Grow an app.</h2>
<p><b>Are you up to the challenge of building your<br> own web-app</b> with mentor guidance between <br>July 1<sup>st</sup> and July 31<sup>st</sup></p>
<button type="button" a href="" id="Buton1">READ ON</button>
</div>
<div class="Module_2">
<h2>What is</h2>
<h2>Plant an App?</h2>
<div>Plant an App is a platform that <br>empowers you to build and customize<br> epic web apps, fast and with low/no<br> code requirements.</div>
<br>
</div>
<div>
<h2><b>What can you build ? </b></h2>
</div>
</div>
</body>
</html>
why can't I edit text inside HTML
If you mean in the browser, text input is only allowed via <input>, <textarea> or contenteditable DOM nodes. (And if you want that text input to persist across page loads, you need to store it somewhere, either in a server database or in the user's localstorage, and retrieve it again on page load; if this is what you're aiming for you'll probably want to follow a specific tutorial, it's more than can really be answered in a single Q&A.)
why h or b or sup tags won't work for me;
They do work in your snippet here. I'm guessing the reason they're not working in your project is because your CSS reset is resetting all the default styles for those tags. Use a less overzealous reset, or remember to restyle the tags you want to use after resetting.
Why is the font size of h tags static if I made a rule in css that should re-scale all of the body's font-size
I'm not sure what's going on with that rule, but it doesn't seem to return a valid size, possibly because of the mixing of unit and unitless values; safari at least is simply ignoring that rule. Simplify that calculation, and check to make sure it isn't also being overridden by your style reset. (If you can clarify what font sizes you were trying to get in relation to the browser window, we may be able to help you fix it.)

How to display international characters in HTML email viewed in Windows 10 Mail?

I am coding an email newsletter and have straightened out nearly every issue across various email services except this one stupid thing: consistently displaying an A with an acute accent on top of it (not optional, it's in the company name) in Windows 10 Mail.
Instead of getting an accented A, I get an A with a tilde on top of it followed by a narrow square. I have tried to fix it (see below), but to no avail.
I know this issue must be down to a setting on the individual computer one happens to be using because I can open it up in Windows 10 Mail on multiple computers and see the issue only half of the time, so perhaps I am SOL. But, I'm not going to know if there's a way to make it work if I don't ask.
I started with &AAcute when I noticed it. Then I went with UTF-8 (&#193), also not working, with or without UTF-8 specified in the head tag like this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
No dice. Using "A&#769" doesn't work consistently, either. So, I started looking for answers, but everything I've waded through is only tangentially related (like displaying special characters after running them through a script for some other thing the asker is working on). Maybe the fact that I am trying to use google's fonts has something to do with it, but the fonts I'm using do contain these characters.
Here is the relevant code as of now:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display|Playfair+Display+SC" rel="stylesheet">
</head>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Montserrat);
#import url(http://fonts.googleapis.com/css?family=Playfair+Display);
#import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC);
<!-- override default font sizing -->
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>
<!--[if mso]>
<style type="text/css">
.dropcaps {
font-family: "Playfair Display SC", Georgia, serif;
}
.serif {
font-family: "Playfair Display", Georgia, serif;
}
.sansserif{
font-family: "Montserrat", Arial, sans-serif;
}
</style>
<![endif]-->
<body>
<table>
<tbody>
<tr>
<td>
<p class="dropcaps" style="Some inline styling"> Á Company Name</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is the first time I've ever had to do an HTML email newsletter so a main struggle here is not knowing what the heck to look up in the first place.
Outlook doesn't fully support Web fonts. I'm not sure if it's fonts with a space in the name like "Playfair Display SC" or if it's the "", but it's hit and miss. Sometimes it defaults to Times New Roman, which is infuriating because it's a font with spaces in the name! Your typeface, Playfair might work just fine for you, except the extended characters.
In my case, the official font face for our company is a web font that works well with everything except Gmail (does not support Google Fonts) and Outlook. So we have a web-safe backup font we use as a fallback for other email clients.
Add this just below your regular style sheet to see if you still have problems:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
Ted Goas previously posted this even simpler code:
<!--[if mso]>
<style>
* {font-family: sans-serif !important;}
</style>
<![endif]-->
If either of these work with Á then you might need to set Georgia and Arial as your specific Outlook fonts to get around the issue.
Good luck
I have been using a site called amp-what to find substitutes for each HTML entity characters when the need arises.
The site had almost every HTML entity you can think off. Using your example from above I have added two from the site to show you how it renders.
<p class="dropcaps" style="Some inline styling"> Á Á Á Company Name</p>
and the above renders as
Á Á
Á Company Name
These came in handy when I was building emails on StrongView using XSL (escaping is a pain in XSL).
Hope this answers your question.

iOS 8,9 font-weight on body element causes html entity ‑ to disappear (non breaking hyphen)

I am using iOS (multiple versions) and when using the html entity ‑ with a font-weight value on the body tag I have the following results:
iOS 9.0.1 (doesn't render entity)
iOS 9.0 (doesn't render entity)
iOS 8.4 (shows odd character below):
Code to reproduce:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<style>
body
{
font-weight: 300;
}
</style>
</head>
<body>
<span>‑$7.00</span>
</body>
</html>
If I remove font-weight it works as expected in all iOS versions. Is this a bug? This bug does NOT happen on Safari for mac
URL to try:
http://chrismuench.com/ios_9_font_bug.html
Try using – as I have not seen ‑ used previously.
I have tested – on both my IOS devices and the IOS Simulator and both work.
For a full list of html safe characters please see This site
It appears font-weight for certain fonts can only be 400 or 700 as described here:
https://css-tricks.com/almanac/properties/f/font-weight/
Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs.

CSS not linking with HTML

My styles are not showing up. I linked it like normal, it made sure the name was correct, the are in the same directory, but still nothing. It works on every other web page I make, it just isn't working right now.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="classyclass.css">
<title>Classy Fun</title>
</head>
CSS:
body
{
color: white;
background-color: navy;
font-family: Times;
}
That is just a sample of the code, there is more.
Edit: It works in IE, but not Chrome.
I tried it on a different computer, it still only works in IE.
You may need to clear your browser cache. You can do that by pressing ctrl + alt + delete and select cache. If you are using an older version of Internet Explorer you will need to go to tools->Internet Options.
ctrl + F5 also reloads everything without cache in most browsers.