HTML5 Boilerplate uses the following conditional <html> classes:
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
I'm wondering how I can reproduce this in a Slim-based template.
Here's what I have so far:
doctype html
/! paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
/[ if lt IE 7 ]
html class="no-js ie6" lang="en"
/[ if IE 7 ]
html class="no-js ie7" lang="en"
/[ if IE 8 ]
html class="no-js ie8" lang="en"
/[ if (gte IE 9)|!(IE) ]
html class="no-js" lang="en"
head
The last conditional is giving me trouble.
Looks like you can use the pipe character to escape processing.
| <!--[if (gte IE 9)|!(IE)]<!-->
<html class="no-js" lang="en"> <!--<![endif]-->
See the Line Indicators section of the API docs.
Related
I have problem with rendering the page in IE8+ browsers and it works fine with FireFox. If i keep the code as below then it does not render the page in IE8+. It renders only in compatibility view mode but not in normal mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--[if lt IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 8]><html lang="en" class="no-js lt-ie10 lt-ie9" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 9]><html lang="en" class="no-js lt-ie10" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/html" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="./public/css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="./public/js/myjs.js"></script>
</head>
<body>
</body>
</html>
But if i change the code as below. Then it renders properly without switching to compatibility view mode in IE8+.
<!--[if lt IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 8]><html lang="en" class="no-js lt-ie10 lt-ie9" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 9]><html lang="en" class="no-js lt-ie10" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/html" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="./public/css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="./public/js/myjs.js"></script>
</head>
<body>
</body>
</html>
what is the difference in both the codes?
Thanks!
<!DOCTYPE HTML should be on the first line of the document in order to swtich to standard (i.e. non-compatibiliy) mode.
If you really need compatibiliy mode, you may just add blank line at the beginning of the file, or some comment like <!-- Yes, I like quirksmode --> to make your action explicit.
Here's my CSS:
.lt-ie8{
body{
display:none!important;
}
}
Here is my 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>
The CSS doesn't appear to target IE7 correctly, does anyone know where I'm going wrong?
That worked perfectly for me.
<html>
<head>
<title></title>
<style type="text/css">
.test{
background: green;
height: 100px;
width: 100px;
}
</style>
<!--[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">
<style type='text/css'>
.test{
background: red;
}
</style>
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
</head>
<body>
<div class="test"></div>
</body>
</html>
IE7 won't let you hide the body tag. A solution would be to create a wrapper div and hide that instead. I've encountered this before, but I'm not sure of the reason.
<html>
<!--[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>
<style>
.lt-ie8 div{ display: none !important;}
body, html{width: 100%; height: 100%;}
div {background-color: red; width: 100%; height: 100%;}
</style>
</head>
<body>
<div></div>
</body>
</html>
Thought these were working fine, but upon just checking I get a blank page in ie9. If I use developer tools to switch to ie 8 or 7 the same result. Maybe I am just too tired to right now, but I'm not seeing anything wrong with the below to cause a problem.
The top adds a class to html ie 8 or lower so I can remove any use of the google fonts in my css. then the bottom loads the google fonts for anything not IE OR IE 9 or higher.
What is wrong with this?
<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="description" content="test">
<link rel="stylesheet" href="/css/base.css" type="text/css">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<!--[if gt IE 8]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
I'm not sure about these lines:
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
Shouldn't they be:
<!--[if !IE]> <html lang="en-US"> <![endif]-->
<!--[if !IE]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
?
It looks like your last conditional statement is messed up.
<!--[if !IE]><!-->
remove the extra
<!-->
and where it closes
<!--<![endif]-->
change it to
<![endif]-->
I am using bootstrap with a theme from bootswatch with html5 boiler plate to create a page. Although it displays correctly in Chrome and Firefox, it doesn't display correctly in IE9 and IE8 mode. However, it works correctly when I set IE9 to use compatibility mode. The problem is that in IE9 without compatibility mode , the page does not align itself and stays at the left. Would like to know where I went wrong. Thanks in advance!
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- More ideas for your head here: h5bp.com/d/head-Tips -->
<!-- For the sticky footer -->
<!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
<style>
#content-main {
padding-top:63px;
}
#form-language {
margin-top: 15px;
}
</style>
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="extras/h5bp/js/libs/modernizr-2.5.3.min.js"></script>
</head>
The code is here: http://jsfiddle.net/WWphP/
<!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
The code above is your problem, basically you say if it isn't IE7 use this code which also includes IE9.
Your #sf-wrapper element is set to display: table; which makes it's width as wide as the content inside is (940px), just set #sf-wrapper to width:100% and it will be centered.
I have a Diazo theme file which is based on the html5boilerplate. The theme uses conditional comments on the <html> element to identify particular versions of Internet Explorer, e.g.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
However, when the theme is applied Diazo seems to strip away these conditional comments and only the last
<!--<![endif]-->
is left in the final markup producing something like
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en" xml:lang="en"><!--<![endif]-->
with an unmatched endif. Using conditional comments within the <html> tag (e.g. inside <head> or further down in the document) seems to work fine.
Examples of a theme and rules files which have this issue are available at
https://github.com/hexagonit/hexagonit.themeskel/blob/master/hexagonit/themeskel/templates/less_theme/+namespace_package+/+package+/theme_resources
I'm using plone.app.theming 1.0b8 with the associated KGS versions from good-py.
This looks like a bug in Diazo, please add it to the Plone bug tracker with component 'Diazo'.
A work around for this could be to use conditional comments on the <body> tag, but Diazo must also add a few classes to the body tag for Plone, which would break it in <=IE8.
<merge attributes="class" css:theme="body" css:content="body" />
So a 3rd rate work around could be to use contional comments on a div block like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<!--[if lt IE 7]> <div class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]> <div class="no-jsie7 oldie"> <![endif]-->
<!--[if IE 8]> <div class="no-js ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="no-js"> <!--<![endif]-->
<div id="content"></div>
</div><!-- Browser Detection -->
</body>
</html>
Given the general fuglyness of Plone's generated html, I could live with this.