CSS won't be loaded at iframe in Internet Explorer(IE) - html

ifram in Internet Explorer (Latest Version) is not able to load my css while Chrome, Safari, Firefox are having no trouble loading the css in iframe.
<iframe frameborder="0" scrolling="yes" marginheight="0" marginwidth="0"
src="/webapp/page1/card.html?customization=default"></iframe>
My style files are correctly connected to the iframe page using the following line:
<link type="text/css" rel="stylesheet" href="/webapp/load-css/BNP/default/css/default.css?loc=1" />
<link type="text/css" rel="stylesheet" href="/webapp/load-css/css/default.css?loc=4" />
here is a full header of html in iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="flexNav-no-touch">
<head>
<meta name="copyright" content="Atos" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="viewport" content="initial-scale=1.0; user-scalable=1;" />
<title>Capture card details page</title>
<link type="text/css" rel="stylesheet" href="/webapp/load-css/BNP/default/css/default.css?loc=1" />
<link type="text/css" rel="stylesheet" href="/webapp/load-css/css/default.css?loc=4" />

Try to add this
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
And if
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->

Related

'title' tag on the header is missing in TYPO3 template

I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.

Polish specific characters in ejs

I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview

Mvc section not rendered in head but in body

I encountered a strange behavior for #RenderSection in the head section of _Layout.
#section AddToHead{
<meta name="test" />
<open-graph og-title="#Model.Test.OG.Title" og-image="#Model.Test.OG.Image" og-url="#Model.Test.OG.Url" og-type="#Model.Test.OG.Type"></open-graph>
}
meta => is plain html
open-graph => is a taghelper which returns html
and added on _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#await RenderSectionAsync("AddToHead", required: false)
</head>
I tried already with RenderSectionAsync and RenderSection. No difference.
When I check the result on page it is as follows (total different result)
View Source Code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</head>
Developer Tools
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="test" />
</head>
<body>
<div><meta property='og:title' content='TestTitle' /><meta property='og:type' content='Article' /><meta property='og:url' content='TestURL' /><meta property='og:image' content='TestBild' /></div>
</body>
Facebook sees my site like Developer Tools does.
What I'm doing wrong? Is this even possible?
Developer tools shows how the browser interprets your HTML which is why you're seeing a difference between viewing source and the developer tools.
As for why that's happening, <div> tags in the <head> are problematic. Most browsers these days will interpret those <div> tags as if they were in the body. If you were to render your <meta /> tags without the surrounding div all should be fine.

Thymleaf Spring MVC Application Not able to include .css in HTML

I am new to Thymleaf. The following is my folder structure. Here I am not able to include my css file into ".html" file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Hello Spring MVC</title>
<link rel="stylesheet" media="all" href="../resources/css/bootstrap.min.css" th:href="#{../resources/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" href="../resources/css/style.css" th:href="#{../resources/css/style.css}" />
<style>
body {
background-color: lightblue;
}
</style>
</head>
Thanks.
The code is working. It is not including CSS because of ""(double-quotes) are not in compatible.(Copied code from a Blog).
Thanks.

Recommended Meta Elements?

Setting up a "basic framework" for my website projects, I'm wondering which meta elements are really necessary/recommended? In particular, I'd like to know how to deal with the language attribute(s)!? In the following example, I think sth. is repeated unnecessarily...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="language" content="en" />
<title> Title </title>
<base href="http://www.mydomain.com" />
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
</head>
P.S. "content-language" = "language"?
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Definitely recommended
<meta http-equiv="content-style-type" content="text/css" />
Useless, browsers only support CSS.
<meta http-equiv="content-script-type" content="text/javascript" />
Useless, browsers only support JavaScript.
<meta http-equiv="content-language" content="en" />
Redundant to <html lang="en">
<meta http-equiv="language" content="en" />
Doesn't exist, AFAIK.
<title> Title </title>
Definitely recommended.
<base href="http://www.mydomain.com" />
Depends on how you want your relative links to work, I suppose.
<meta name="charset" content="utf-8" />
<meta name="content-language" content="en" />
<meta name="language" content="en" />
Look like typo's.
<meta name="description" content="description" />
Probably useful.
<meta name="keywords" content="keywords" />
Ignored by every search engine due to widespread abuse.
Use this for HTML 5:
<!DOCTYPE html>
This looks wrong:
<meta name="charset" content="utf-8" />
should probably be this for HTML 5:
<meta charset="utf-8">
That is the new HTML 5-way of setting charset encoding. It is highly recommended to also include the old way:
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
These should be directly after the opening head-tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>The title</title>
</head>
<body>
</body>
</html>