I've build an webcomponent with Polymer, and it works on all browsers except for IE11.
I've tried everything but can't figure out why it doesn't work.
Attached is the code, could you help me figure out why?
It remains at the loading.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial scale=1, user-scalable=yes">
<title>wc test</title>
<link rel="manifest" href="/manifest.json">
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>if(!window.customElements){document.write("<!--")}</script>
<script type="text/javascript" src="/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!-- do not remove -->
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/src/klantenvertellen-app/klantenvertellen-app.js"></script>
</head>
<body>
<klantenvertellen-app>Loading...</klantenvertellen-app>
</body>
</html>
Related
I'm using some libs
In Visual Studio Code, with the Live Server extension it doesn't give this error, but when opening the file without using the extension, I have these errors in the console
`
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de E-mail HTML</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
`My head in HTML
I'm trying to see why our CSS won't render on IE. I'm thinking maybe it is something to do with linking the stylesheet? This is hosted on Salesforce Marketing Cloud if it matters. I've included everything in the header below:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><link rel="icon" type="image/ico" href="contents/ui/theme/i/favicon.ico">
<meta name="robots" content="noindex,follow"><link rel="dns-prefetch" href=""><link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="stylesheet" id="them-style-css" href="https://xx.com/b2c-general-css" type="text/css" media="all">
<link rel="stylesheet" id="g-font-css" href="//fonts.googleapis.com/css?family=Roboto%3A300%2C500%2C700&ver=4.9.8" type="text/css" media="all">
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
use the meta in head
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This code doesn't work when I pass ngRoute as a dependency. Can anyone tell me what the problem is?
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
<!-- Angular Material style sheet -->
<link href="vendor/angular/angular-material.min.cs" rel="stylesheet" media="all">
<!-- Angular Material requires Angular.js Libraries -->
<script src='vendor/angular/angular.min.js'></script>
<script src='vendor/angular/angular-route.min.js'></script>
<script src='vendor/angular/angular-aria.min.js'></script>
<script src='vendor/angular/angular-messages.min.js'></script>
<script src='vendor/angular/angular-animate.min.js'></script>
<!-- Angular Material Library -->
<script src='vendor/angular/angular-material.min.js'></script>
</head>
<body>
<h3>HELLO!!! {{2+2}}</h3>
<data-ng-view></data-ng-view>
<script>
var app = angular.module('myApp', ['ngRoute']);
</script>
</body>
</html>
I am trying to use "vulcanize index1.html > index2.html", but am stumbling on an issue in IE. I have condensed it into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
</head>
<body>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
drawer
</div>
<div main>
main
</div>
</paper-drawer-panel>
</body>
In Chrome the result is fine, but in IE, "drawer" and "main" are shown incorrectly
Anyone?
Seems to be a bug which is already logged
https://github.com/Polymer/vulcanize/issues/209
I have a mockup here
http://dummytest.herokuapp.com/
At the moment the plain vanilla HTML shows first and then it flickers and it is rendered with CSS applied. How can I get my page to show the CSS styling as the first thing completely bypassing the unstyled text?
Your document is not well formed (wiki), which is leading to this behavior.
Generally web pages go:
<html>
<head>
<!-- meta tags go here along with title,
script links, and css style references -->
</head>
<body>
<!-- elements for rendering go here -->
</body>
</html>
You would like to correct your HTML to comply with HTML standard:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>-->
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/datepicker.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<style>body {
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="/javascripts/slimScroll.min.js"></script>
<script src="/javascripts/housefix.js"></script>
<script src="/javascripts/bootstrap-transition.js"></script>
<script src="/javascripts/bootstrap-alert.js"></script>
<script src="/javascripts/bootstrap-datepicker.js"></script>
<script src="/javascripts/bootstrap-modal.js"></script>
<script src="/javascripts/bootstrap-dropdown.js"></script>
<script src="/javascripts/bootstrap-scrollspy.js"></script>
<script src="/javascripts/bootstrap-tab.js"></script>
<script src="/javascripts/bootstrap-tooltip.js"></script>
<script src="/javascripts/bootstrap-popover.js"></script>
<script src="/javascripts/bootstrap-button.js"></script>
<script src="/javascripts/bootstrap-collapse.js"></script>
<script src="/javascripts/bootstrap-carousel.js"></script>
<script src="/javascripts/bootstrap-typeahead.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<p>
Home |
Log In
</p>
<h2>Welcome! Please log in.</h2>
</body>
</html>
Put all your <head></head> code in one place and all your <body></body> code in one place as well.
Currently you have 2 sets of <head> and <body>. Take the one above (with menu) and merge it with the one below (with welcome message).
It would be best to run all your webpages through http://validator.w3.org/ to avoid future problems like this.