I'm facing a prob with my CSS in IE7 and IE6. The biggest problem is that in one of my page the CSS is not loading at all in IE 7,6.
When I use the following code-
<!DOCTYPE html>
[if lt IE 7] <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> [endif]
[if IE 7] <html class="lt-ie9 lt-ie8" lang="en"> [endif]
[if IE 8] <html class="lt-ie9" lang="en"> [endif]
[if IE 9] <html class="ie9" lang="en"> [endif]
[if gt IE 9] <html lang="en"> [endif]
The CSS is getting loaded, but then, while running the website on chrome or Firefox the above codes of line are also printed. However no line is printed while using IE and the CSS is working fine.
Also when I use this code
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
The CSS does not loads again in IE. What should I do.?
I hope my question is clear to you. Please Help.
You file starts with this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function test(add)
{
var pin;
if(window.XMLHttpRequest)
{
pin=new XMLHttpRequest();
}
else
{
pin= new ActiveXobject("Microsoft.XMLHTTP");
}
url=add;
pin.open("GET",url,true);
pin.send();
}
</script>
</head>
</html><!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
…
As you are ending the file before it even starts, you are triggering quirks mode in IE7 and below. Your file should start like the 2nd snippet you've posted.
Related
I'm using ReactDOMServer to generate a static site via the server side and it doesn't seem to like this component specifically the opening <!DOCTYPE html> tag. (see below)
I'm doing this as I'm trying to use React to fully render a page via the server-side for IE8 compatibility and eventually become an isomorphic app.
Is there a best practice on how to fully render static markup with React via the server-side (with inclusions of the opening html tags, etc.)?
'use strict';
import React from 'react';
export default class Root extends React.Component {
render() {
return (
<!DOCTYPE html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
);
}
}
let html = ReactDOMServer.renderToStaticMarkup(<Root />);
Bonus: Although a simple DOCTYPE is breaking it, eventually I'd like to add additional IE tags like below at the top.
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="en-US" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html dir="ltr" lang="en-US" class="no-js"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
You'll likely want to emit the DOCTYPE header outside of your React component and replace <!DOCTYPE html> with an <html> node. JSX isn't HTML and just maps your elements to a corresponding React.createElement() call, which doesn't make sense for a DOCTYPE.
Take a look at these for reference:
Emitting a DOCTYPE before rendering the component
res.send('<!doctype html>\n' + ReactDOM.renderToString(<Html />));
An HTML component that handles tag generation
render() {
return (
<html lang="en-us">
<head></head>
...
</html>)
}
noob question, i start create handlebars templates and is kind useful.
I can create templates without load a html tag in html file, so should I just use handlebars and stop use html tags in my html? what you recommend guys? its a good practice or no? thank you.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![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, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="public/stylesheets/style.css"> -->
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
</head>
<body class="body">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="public/javascripts/libs/jquery-2.1.4.min.js"></script>
<script src="public/javascripts/libs/handlebars-v3.0.3.js"></script>
<script src="public/javascripts/index-template.js"></script>
<script src="public/javascripts/templates/h1-h2.js"></script>
</body>
</html>
I'm editing someone elses webpage for content, by changing the HTML files on the drive, adding text, comments, wtv. I'm not a web designer, so this is the only way I knew to do it.
On most browsers, my changes show, but on internet explorer, sometimes it will revert to the old webpage. I can't find the info for the old page anywhere on the drive that holds all of this content. Please steer me in the right direction.
If it helps, each page starts like this (this part I haven't edited)
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-us" class="no-js"> <!--<![endif] -->
<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>This Particular Pages Title</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" >
<link href="style/less/main.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/business-custom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><script src="selectivizr-min.js"></script>
<![endif]-->
I think IE uses caching.
By adding a random parameter to the URL the caching will be circumvented.
so e.g. www.mysite.nl?1
and then
www.mysite.nl?2
etc.
How to write custom conditions in including JavaScript files using RequireJS?
Example:1
if("ontouchend" in document) document.write("<script
src='/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
Example:2
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
Currently I am using shim and paths. Is there any room to place this. Is it possible?
You could use a conditional specific class on the html element itself, then checking for it and loading the dependencies will be easier in the inside your existing script.
For Example:
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="ie"> <![endif]-->
<html>
And in your script, you could try something like:
if ($('html.lt-ie9').size()) {
require(['/Scripts/ieSpecificScripts'], function(ieScript) {
// ... do stuff
});
}else
{
...
}
Happy Coding.. :)
I'm developing a Grails project which is using some JS code. It runs perfectly in Google Chrome (v34.0.1847.116 m) and Mozilla Firefox (v28.0), but it simply does not run/start in IE (v9.0.23). I just have a blank screen.
According to many previous answers on SO community, I should be checking some meta tags which I'm using, but it's not running successfully anyway. There goes my code!
page.gsp, used as main layout:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<!--[endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title><g:layoutTitle default="A nice Title"/></title>
<r:require modules='core'/>
<g:layoutHead />
<r:layoutResources />
</head>
<body>
<div id="container">
<div id="header">bla bla bla<g:navbar /></div>
<g:menu menuKey="1"/> <!-- a taglib which builds a dynamic menu -->
<div id="content">
<g:layoutBody />
</div>
</div>
<div id="footer"><div class="container">bla bla bla</div></div>
<r:layoutResources/>
</body>
</html>
home.gsp, a simple view to be loaded in the layout above.
<html>
<head>
<meta name="layout" content="page" />
</head>
<body>
<h2>A simple content here</h2>
</body>
</html>
I'm loading all my JS and CSS resources using ApplicationResources.groovy but I don't have any JS error according my Firebug. After all, what else could I check or what features/functions' success must I asure?
Change
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<!--[endif]-->
to (properly close the else comment)
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<![endif]-->