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.
Related
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]-->
My WordPress site is having some major IE issues that include jQuery, box-shadow, and other strange CSS problems.
Would my doctype be to blame?
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NA-net | NA's Communication Network</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven-child/style.css" />
<link rel="pingback" href="http://121.5.7.109/na_comm_new/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="NA-net » Feed" href="http://121.5.7.109/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net » Comments Feed" href="http://121.5.7.109/na_comm_new/?feed=comments-rss2" />
<link rel='stylesheet' id='wp_sidebarlogin_css_styles-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/style.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='bbp-default-bbpress-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/bbpress/bbp-theme-compat/css/bbpress.css?ver=2.1.2' type='text/css' media='screen' />
<link rel='stylesheet' id='slider-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/css/slider.css?ver=1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/js/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/js/blockui.js?ver=1.0'></script>
<script type='text/javascript'>
Doctype is ok, but i would recommend to use this one:
<!DOCTYPE html>
<!--[if lt IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 lt-ie6"> <![endif]-->
<!--[if IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="modern"> <!--<![endif]-->
<head>
...
Provided your code is standards compliant, it is unlikely your doctype is causing the problem. (Obviously the quick way to check is easy: change it to the HTML4.01 doctype and see if anything corrects itself!) The 'generic' HTML doctype should trigger standards mode in all modern browsers, and even legacy browsers should switch to full or near standards mode in the presence of any doctype. Given you tagged IE9 in the question, your problems are likely due to IE9 being only partially standards compliant past CSS 2.1. I suggest trying to isolate your problems individually.
Box-shadow: According to MDN, you may need to explicitly set border-collapse:seperate for it to work in IE.
Other: I see you use conditional comments to sniff out IE6-8. Perhaps you need to extend this to IE9? Also watch out for any nasty inline CSS hacks...
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.
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.