CSS Stylesheets does't apply on IE7 and IE8 - html

I' am running into a issue, the site is still in my localhost. Where the css links are not including into into the page. It works in all other browser expect IE7 and IE8.
I' am using WordPress 3.6, Bootstrap 3, Modernizr and jQuery.
Source Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[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 ie-7"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie-8"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie9 ie-9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo title(); ?></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap-theme.css"/>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/common.css"/>
<?php if(is_front_page()){ ?><link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/home.css"/><?php } ?>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/media.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/print.css" media="print"/>
<script type="text/javascript" src="<?php echo JS_PATH; ?>/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript">var template = '<?php echo get_template_directory_uri(); ?>';</script>
</head>
Chrome Head
IE8 Head
What I thought this might be something to do with DOCTYPE so I changed to HTML4 but still its not working. Also note that it works on IE8 Browser Mode and Document Mode as Quirks but doesn't work on Standard Mode

You are using conditional comments.
<!--[if gt IE 8]><!--><html class="no-js">
<head>
You never end the concom for the <html> start tag for gt IE8. Everything before the next comment is hidden in browsers that match that.
Add <!--<![endif]-->.

Related

CSS is not rendering with HTML file in Django

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'),]

How to have a basic html structure?

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+!..

Initializr template not rendering correctly in IE 8

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%; }
}

Conditional comments don't work

I have this code with conditional comments for IE7 and IE8:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/ui.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link href="css/ie8fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie7fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Stylesheets in conditional comments are not working. I tested this in IE Tester.
Actually, Microsost doesnt support Conditional comments any more. I was kind of stuck myself for a while, so I wrote an an article about it:
http://www.yofiel.com/writing/essays/microsoft-s-exit-strategy
IETester is based on an unsupported hack that has incorrect behaviors in some cases. Have you tried testing in a real browser? Microsoft provides the VMs for free at http://modern.ie.

sed command issues w/ html string replace

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.