I am creating a new site using the Initializr template. It looks great on modern web browsers. I though it was optimized for compatability but when I open it in Internet Explorer 8 (a browser I must unfortunarly support) it looks like this:
As you can see the tab navigation is not rendering properly.
I am using the default:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr.custom.82220.js"></script>
</head>
The only difference above is that I tried updating modernizr to see if it would fix the problem but the result is the same. How can I get HTML5 boilerplate to render correctly in IE 8?
The problem was resolved adding this to the css page:
#media only screen and (min-width: 480px) {
.lt-ie9 nav a { margin: 0 0.7%; }
}
Related
I've been trying to link up my css with the HTML code, but CSS is not working in DJANGO!
I'm sharing all the screenshots of my code!
Hope anyone can help me out with this.
Thanks in advance!
h2{
color: blue;
}
.heading {
color: blue;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MY PROFILE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
WELCOME HERE!
<h2 class="heading">This is CSS</h2>
<script src="" async defer></script>
</body>
</html>
Have you set the static file base directory in settings.py?
import os
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
First off all total n00b here.
Is it possible to skip clicking on HTML button with simple URL string?
example:
Im visiting page www.somesite.com/page1
on page1 there is a html button (type=submit, value=ADD)
when I press that button it sending me to www.somesite.com/page2
question:
Is there a way to put pressing button command in URL that gonna bring me directly to page 2 (something like www.somesite.com/page1&press button value=ADD) ???
Thanks
Try with jquery
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<form>
<input id="data" value="132">
<button class="goToPage">Save</button>
</form>
<script>
$(document).ready(function () {
$('.goToPage').click(function () {
var data = $('#data').val();
window.location = "yourUrl?data=" + data;
});
});
</script>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
I saw there is a method to load the HTML sample in VS Code.
But I don't know what is the shortcut of it.
! + Enter would do the work for you.
type ! at the beginning and hit enter it will generate the basic HTML Structure i do it all the time
press CTRL+! and then press Tab or press ctrl + space
Another approach is to install extension
https://github.com/sidthesloth92/vsc_html5_boilerplate
it will generate this code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
If you are using windows
simply check the language if it is HTML or not and afterward the same step shift+!..
I'm using the conditional statement here to add i.e. browsers css styles
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
If I test in emulators this conditional statement doesn't seem to work, the html tag doesn't have the 'lt-ie9' class.
If I test in products like browserstack the conditional statement seems to work and I can see the text thats is shown with the class .lt-ie9
Is the conditional html tag correct? Should I not trust the emulators
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.test{
color: red;
display: none;
font-size: 2em;
}
.lt-ie9 .test{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="test">IE8</div>
</body>
</html>
Without knowing the emulators in question, there's no way for us to know. Your best course of action in debugging is to copy down that code into the body and replace the html tags with something visible:
<!--[if lt IE 7]> IE, Less than 7<![endif]-->
<!--[if IE 7]> IE 7 <![endif]-->
<!--[if IE 8]> IE 8 <![endif]-->
<!--[if gt IE 8]><!--> IE 9+ or not-IE <!--<![endif]-->
I am stumped on why this sed command would not be working:
sed 's/<script id="live-reload"[\s\S]*?<\/script>/test/g' www_public/index.html > www_public/index.html.temp
It should replace the live-reload script tag of the following HTML with 'test':
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AssembleJS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<script id="require-lib" data-main="src/config" src="src/libs/require.js"></script>
<script id="live-reload">document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<script id="test"> bla bla bla </script>
</body>
</html>
Here's the regex working:
http://regexr.com?339ga
You need to use -r for ? as it's extended regex:
$ sed -r 's/<script id="live-reload".*?<\/script>/test/g' file
or escape it:
$ sed 's/<script id="live-reload".*\?<\/script>/test/g' file
Output:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AssembleJS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<script id="require-lib" data-main="src/config" src="src/libs/require.js"></script>
test
<script id="test"> bla bla bla </script>
</body>
</html>
Notes:
Also changed [\s\S]*? to .*? as they're complimentary groups.
The g flag is only necessary for multiple matches on a single line.
If you're running Mac the -r flag is -E so check with sed
--help for the extended regex option.
Obligatory don't parse [x]html with regex warning, using a parser.