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]-->
Related
Why is this ie6.css file not loading on IE6?
The 'TEST 123' text does show.
(the css works if I remove the condition)
I'm testing this on a virtual box with xp and IE6 from http://modern.ie
(I know the _ and * css hacks, but I need a very different layout on IE6)
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE Client</title>
</head>
<body>
<!--[if lt IE 7]>
<p>TEST 123</p>
<![endif]-->
</body>
</html>
You have to use the full url.
When using the syntax like that it won't work in your browser.
"http://yourwebsite.com/Web/css/ie6.css"
You should be able to use:
Target IE 7 and LOWER
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
OR
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
I'm trying to use HTML5 Boilerplate + Normalize.css for my current project, and I faced the follow issue.
There seems to be a gap between my HTML tag and my BODY tag.
I've tried to figure out what's the cause of this, but failed after many tries.
I must have missed something here or there.
<!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>Ridanis | Web Design & Web Development</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-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- Wrapper / Start -->
<div class="wrapper">
<h1>Hello World!</h1>
</div>
<!-- Wrapper / End -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
Here is a fiddle: http://jsfiddle.net/C7gbC/
Thanks in advance.
normalize.css inserts a default margin declaration on h1 elements based on browser defaults for consistency:
h1 {
font-size: 2em;
margin: 0.67em 0;
}
If you zero it out manually (either in your main stylesheet or by modifying normalize.css directly), the gap will disappear:
h1 {
margin: 0;
}
Found this to be my issue with the "h2" in my page header. Same for a "p" tag in both iE8 and Crome. Just setting the margin: 0; for my "h1" AND "p" tags to some structure styles I had set at the beginning of my main.css page. Solution seems to work
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.
I am using three conditional CSS files in my site, one for ie7, one for ie8 and one for IE only. IE7 and 8 are parsing properly when I parse the skin but for some reason, IE only conditional does not want to parse correctly, leaving this when the browser renders
<!--[if]> <![endif]-->
If however, I add that conditional statement directly to the parsed ascx page, the conditional works properly.
Here are the three conditional statements:
<!--[if IE]>
<link href="/portals/0/skins/sunmedia2011/css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="/portals/0/skins/sunmedia2011/css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="/portals/0/skins/sunmedia2011/css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
Any thoughts?
Thanks!
I know this is old but could be helpful to someone:
<!--[if IE]>
<link href="<%= SkinPath %>css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="<%= SkinPath %>css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="<%= SkinPath %>css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->