I have written a simple HTML file. In that in have included input <date> element which will not be supported by IE, Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Polyfill</title>
</head>
<body>
Date Field :
<input type="date" name="polyfill-date" id="polyfill-date">
</body>
</html>
I wanted to make it work in Safari, So I have included date-input-polyfill by using "npm install --save date-input-polyfill" dependency in my project.
after that, I included this script tag in my HTML file.
<script src="node_modules/date-input-polyfill/date-input-polyfill.dist.js"></script>
then the date filed worked in IE but not in Safari.
The main aim is not to depend on any library like datepicker or anything. I just wanted to create a polyfill / fallback.
I am working in window 10 with Safari 5.1.7.
Kindly help me to resolve this.
Related
I'd like to get some help. The problem is that I continue getting a "div" on my web page without even having it in my code. If I style the "div", for some reason, it appears without being even presented in my code, and it appearts at the bottom of the page. And if I add "div" then it's doubled without any spacing.
I know the question might be really stupid, but I don't really know what to do.
Below you'll find the code and the link to the sreenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bullet-icon.css">
<style>
div {
background-image: radial-gradient(red, pink);
width: 500px;
height: 300px;
}
</style>
</head>
<body>
</body>
</html>
I have checked it in last opera, last chrome and ie 9 - there is no this issue. Seems like it is done by some extension of your browser, browser itself, or http server which you are using.
Try to change browser, then:
if issue still here - check your http server
else - check your extensions
I'm running a simple Flask server on Ubuntu, basically a beginner with web apps. When I request a page through Firefox, the screen flashes briefly with the raw HTML before the CSS is applied.
I thought this was a problem with the way the CSS is specified in the HTML (as I found in a few suggestions) but it doesn't seem to be the case because my other browser Brave doesn't have this problem, not even when the CSS resource is requested for the very first time or if I disable caching from the Network tab and refresh repeatedly. It always loads correctly without any flashing or flickering (to my eyes anyways). Below is the current HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<!-- <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div> -->
<link rel="stylesheet" href="../static/styles/bulma.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> -->
</head>
Has anyone experienced this issue and is it browser specific? What is the simplest way to resolve it?
I tried to shrink and zoom in Chrome it from a mobile browser (I tried it on Chrome browser on an Android and iPhone).
But it's not working.
<meta name=“viewport” content="width=device-width, initial-scale=1.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
I'm not sure if that is the problem.
But, I think that you are using different quptation marks for the name property “” instead of "".
You can also delete the user-scalable=yes as it is the default.
At last, make sure that you declare your page as HTML5 with the <!DOCTYPE html> declaration.
Try using this code instead:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=12.0, minimum-scale=.25"/>
<title>Your Title</title>
</head>
<body>
Your CONTENT
</body>
</html>
I know this is probably one simple mistake I'm missing, but a second set of eyes would be great. The following HTML and CSS is connecting on Firefox and IE, but not Chrome. I'm testing it with the font size. It is like Chrome is ignoring the CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Put A Title Here Later</title>
<meta name="description" content="What is this about?">
<meta name="author" content="My Name">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>
CSS:
p {
font-size: 100px;
}
Chrome likes to cache stylesheets. That's the only thing I think would be different here given the code provided. When you have this page loaded in Chrome, try pressing Ctr + Shift + R for a hard reload.
If that doesn't work, press F12 to open the inspector, then go back to your main browser window and click and hold the reload button until a sub menu pops up. From there select "Empty Cache and Hard Reload".
Also, be sure that you have actually typed this CSS and not copy and pasted it. It's rare, but I have seen a copy-and-paste introduce hidden characters that caused strange browser errors.
I'm able to resize Text Field in Chrome & other browsers. However, I'm not able to make the same work in IE9, even after installing the Chrome frame for IE. I use for Ex:
style="resize:horizontal;"
Ex:
Can someone suggest me how to make it work in IE browsers?
Thanks.
*EDIT*
Ok, So after a lot of tweaking around, I finally made it to work for IE9 !! Yay :)
First things first : You need to install the Chrome Frame on IE9.
Then you add some tags for it to render on IE.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Here's the complete code :
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- <meta http-equiv="X-UA-Compatible" content="chrome=IE9">
<!-- X-UA-Compatible: chrome=1-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<head>
<title>Text Feilds</title>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="txt1" style= "resize: horizontal"; />
<input type="text" id="txt2" style= "resize: both"; />
</body>
</html>
You can’t, in any simple way. According to http://caniuse.com/#feat=css-resize there is no support in IE 9, and IE 10 status is unknown.
If you have a look at http://www.w3schools.com/cssref/css3_pr_resize.asp you will see that this feature is not supported in IE at all.
If you want to support this feature in all browsers you will have to create your own resize function in javascript (our use any framework if there is one).
That's HTML5 markup and older versions of IE do not support HTML5 or HTML5 ready. IE 9 only supports it in parts