Launched my website – http://www.artsbrand.co.uk – yesterday without having tested the finished product on IE. Now that I have, it initially brings up completely unstyled html, then after a couple of seconds the screen just goes blank. When that happens, this is the only thing in the source:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
Does this have something to do with my Google Custom Search Engine?
I have a few conditional comments, which I'll list below in case they're important:
First I set up the html class (the no-js class is for Modernizr):
<!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!--> <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!--> <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!--> <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
Then I set up three different stylesheets with media queries:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
This one's just for Sticky Footer (as per the instructions here http://www.cssstickyfooter.com/style.css ):
<!--[if !IE 7]><!-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<!--<![endif]-->
I only have access to IE7 and IE9, but the behaviour is exactly the same in both of those – 1-2 seconds of unstyled page (I saw a split second of CSS once in IE9!) followed by sheer blankness. I'd be very grateful for any help you guys can offer!
EDIT - I'm less convinced it has anything to do with conditional comments now – I just tried getting rid of all of them and it made no difference at all. I should probably also mention that I've tried both versions of Google CSE (Search Element V1 and Search Element V2) and the results were the same.
UPDATE - I've got a fairly messy workaround now, although the search will have to be out of action in IE for now. The problem was a combination of my dodgy use of media queries/conditional comments (I'm new to both of them!) and the still unknown issue that's causing IE to react badly with the Google CSE. So anyway here's what my stylesheet links look like now:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->
Meanwhile the search script is wrapped in [if !IE] comments.
This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.
From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.
I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.
At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.
As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="Description" content="C.V"/>
I have added code below to render in IE but will not work.
<!--[if lt IE 9]>
<script src="Assets/html5shiv/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type= "text/css" href="Assets/aboutme.css"/>
if you want to target all versions of IE(except 10) use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
For IE 10 check this:
IE 10 Specific Styles
hope it helps.
EDIT:
and last, check this for IE 11 & 12+(EDGE) Detect Internet Explorer (IE) up to version 11 and Edge (12+)
Bootstrap 3 is not working or broken on Win 7 IE Version - 8.0.7600.16385
URL : http://getbootstrap.com/
It seems the respond.js or html5shiv is not working on this specific version of IE 8. But its working fine on IE v8.0.7601 and IE v8.0.6001 (Via Sauce labs)
Here is the HTML (head part) All files are on correct path.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![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, maximum-scale=1, user-scalable=no">
<title>OHH Web App</title>
<!-- Bootstrap -->
<link href="media/css/bootstrap.css" rel="stylesheet">
<!-- Structure: Global -->
<link href="media/css/global.css" rel="stylesheet">
<!-- Modernizr (Should be on Head)-->
<script type="text/javascript" src="js/modernizr.js"></script>
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/respond.js"></script>
<![endif]-->
</head>
Any Idea how to fix this? or is this a known bug in this version? Thanks for your help
Attached screenshot.
HTML5.js only wokr on server side, but sometimes its get problem with some other scripts. please check your CSS properties, and if that does not help. try add manually some script to force html5 elements, like this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--[if lt IE 8]>
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
<![endif]-->
Please check does evrything works in ie8, and check any error logs, maybe some script is forcing the problem.If you are didint sure about your css, please check this
http://css3pie.com/
It can help you a lot properly write your css for older browsers
We are using Yii for our project. I am trying to conditionally register two JS scripts/assets in the header: one for IE8 and one for other browsers - using conditional comments (e.g. <!--[if lte IE 8]>).
However, I am only familiar with Yii::app()->clientScript->registerScriptFile and Yii::app()->clientScript->registerScript, none of which exposes a way to surround the registered script with a conditional comment.
I tried directly doing echo at the start of the controller action:
echo '<!--[if lte IE 8]><script src="'.$assetsPath . '/charts/r2d3.js'.'" charset="utf-8"></script><![endif]-->';
However, when I look in the source the script is displayed at the top of the document (before even <html>). If possible, I'd like to display it in <head>.
You could use the following extension
http://www.yiiframework.com/extension/ewebbrowser/
I put the file in component. Then just do in the code
$b = new EWebBrowser();
if($b->platform == "Internet Explorer" && $b->version == "8.0") {//you could explode version at the . I guess, however not sure if there is even a version 8.x or whatever
Yii::app()->clientScript->registerScriptFile("path/to/script");
} else {
Yii::app()->clientScript->registerScriptFile("path/to/otherscript");
}
I did test this with the current IE, Firefox and Chrome browser. I can not ensure this would work with other version of these browser. It two years old, but it still seems to be working.
You can set this in head as following,
Go to ->views->layouts->main.php
Simple add what ever the content you need after,
i.e
<!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">
</head>
or if you need to check a browser version, in a controller and append scripts. this way would also work.
define this in controller,
public function beforeRender( $view ) {
//condition to check the browser type and version
if($browser = 'ie' && $version = '8') {
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/script.js');
return true;
}
}
// havent tested the second option. but should work.
you can check the browser type and version with any of the following,
<?php
echo $_SERVER['HTTP_USER_AGENT'];
$browser = get_browser(null, true);
print_r($browser);
?>
check this link, http://php.net/manual/en/function.get-browser.php#101125
This is not the optimum method, but you can achieve you goal using following code:
If you want above conditional statement for particular Controller, then:
Under you layouts/main.php
<?php if (Yii::app()->getController()->getId() == 'Your Controller Name'): ?>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<?php endif; ?>
If you want above conditional statement for Action of particular Controller, then:
Under you layouts/main.php
<?php if (Yii::app()->getController()->getId() == 'Your Controller Name' && Yii::app()->getController()->getAction()->getId() == 'Your Action Name'): ?>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<?php endif; ?>
In my site, I have a css file with all the media queries. how can i use a condition not to use that file if its IE8? i am using html and jquery. IE8 does not support media queries. so i want to restrict IE8 to get that media-queries.css file. but all other browsers should get it. It can be jquery or javascript.
the css is included in the head:
<head>
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!-- dont want this only in IE8 and bellow -->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
</head>
Just use:
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!--[if gt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
<!--<![endif]-->
The code means: if greater than IE8 take notice of this html. Only IE reads these queries so by adding <!--> and <!-- other browsers just see two comments with a link to a CSS file in between.
How to identify the running Internet Explorer Versions which is IE7,IE8 or IE9. According to this, I need to call the css styles using the java script function. Please write that javascript code.
Help me
If your objective is purely to include specific stylesheets for specific versions of Internet Explorer, you want to use conditional includes:
HTML
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
And so on.
Usually detecting features is the best thing, but a fairly good point in this special case is detecting the existence of conditional comments, which are supported by IE only.
Here's what I usually do:
var div = document.createElement("div"), IE;
div.innerHTML = "<!--[if IE 5]>5<![endif]--><!--[if IE 5.0]>5.0<![endif]--><!--[if IE 5.5]>5.5<![endif]-->\
<!--[if IE 6]>6<![endif]--><!--[if IE 7]>7<![endif]--><!--[if IE 8]>8<![endif]--><!--[if IE 9]>9<![endif]-->";
IE = d.firstChild && d.firstChild.nodeType===3 ? +d.innerHTML : false;