This question already has answers here:
How can I set CSS only for specific IE browsers?
(7 answers)
Closed 8 years ago.
I need to add reference to a external css file in my HEAD of page.
But it should be added only for IE browser.
Is this possible ?
<head>
<link type="text/css" rel="stylesheet" href="/themes/jfile.css" />
</head>
Simple
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/themes/jfile.css" />
<![endif]-->
Or
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href='/Common/Css/ie6.css' type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href='/Common/Css/ie7.css' type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href='/Common/Css/ie8.css' type="text/css" />
<![endif]-->
Related
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.
Ive got this <head>:
<head>
<link rel='stylesheet' href='/animated/animate.css' type='text/css' media='all' />
<script type='text/javascript' src='/animated/animated.js'></script>
</head>
and I need to have these two files disabled in IE8 and lower.
Is there any way how to do that?
Use conditional comments. In this case you can use -
<head>
<!--[if gt IE 8]> <!-->
<link rel='stylesheet' href='/animated/animate.css' type='text/css' media='all' />
<script type='text/javascript' src='/animated/animated.js'></script>
<!-- <![endif]-->
</head>
Note that: gt means 'greater than' while gte means 'greater than or equal'.
Learn more about conditional comments from here
I am not able to render AngularJs templates in Internet Explorer 8, I have followed several suggestions for using AngularJs in Internet Explorer but I am still not able to get it to work. below is my html code for the page including the scripts I have used. Is it possible to point out if I am using anything that could make the code not work in Internet Explorer? I can upload details of other files if anybody would like to know the details of it. Everything works perfectly on all other browsers but just Internet Explorer.
<!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 xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" class="no-js"> <!--<![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.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<style>
#-moz-document url-prefix() {
.filter-menu .btn {
padding: 0;
}
}
</style>
<!-- endbuild -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.js"></script><![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> -->
</head>
<body>
<!--[if lt IE 8]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<aside id="sidebar">
<ul class="list-unstyled">
<li></span></li>
<li></span></li>
<li></span></li>
</ul>
</aside>
<section id="topbar">
<ul class="list-unstyled">
<li><span class="icon-briefcase icon-2x"></span></li>
</ul>
</section>
<section id="main-container">
<section ui-view id="main-inner-container"></section>
</section>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bower_components/jquery-easing/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/directives.js"></script>
<script src="scripts/controllers/hotelsController.js"></script>
<script src="scripts/controllers/restaurantsController.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- endbuild -->
</body>
</html>
I am working on AngularJS project at the moment where Internet Explorer 8 support is required.
Everything is working fine cross browsers - including IE 8.
If you need to give IE8 support my first advice for you is to not use custom element tags such as <mynewtag> (use the attribute version <div mynewtag> instead).
It will save you the headache of creating elements on the fly like this one:
<!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->
Below you can find my index.html bootstrapped for AngularJS to work with IE 8:
<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" ng-app="myApp">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="header"></title>
<meta name="description" content="">
<!-- build:css({.tmp,app}) system/css/main.css -->
<link rel="stylesheet" href="system/css/main.css">
<!-- endbuild -->
<!--[if IE 8]>
<script src="ui/components/es5-shim/es5-shim.js"></script>
<script src="ui/components/json3/lib/json3.min.js"></script>
<![endif]-->
</head>
<body ng-controller="myAppCtrl">
<!-- Add site or application content here -->
<div class="content" ng-view=""></div>
<!-- build:js system/js/plugins.js -->
<script src="ui/components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) system/js/scripts.js -->
<script src="system/js/app.js"></script>
<script src="system/js/filters/filters.js"></script>
<script src="system/js/controllers/controllers.js"></script>
<script src="system/js/services/services.js"></script>
<script src="system/js/directives/directives.js"></script>
<script src="system/js/scripts.js"></script>
<!-- endbuild -->
<!-- build:js system/js/modules.js -->
<script src="ui/components/angular-resource/angular-resource.js"></script>
<script src="ui/components/angular-cookies/angular-cookies.js"></script>
<script src="ui/components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
</body>
</html>
Hope that's helpful.
I would like to use this example of a sort of modal window as seen here: http://www.insight51.com/surf/ (just click in any image to see it in action), I checked the source of the page and I can see I will need a lot of css and scripts... this is not a normal popup...:
<meta name="location" content="HemiEU" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/framework.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/insight/css/jquery.modal.css" />
<!--[if lt IE 9]><link href="themes/insight/css/ie8.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<!--[if IE 6]><link href="themes/insight/css/ie6.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="themes/insight/js/jquery.min.js"></script>
<script type="text/javascript" src="themes/insight/js/combined.js"></script>
<script type="text/javascript" src="themes/insight/js/common.js"></script>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
can you help me out?
the website I am working on is www.thedayistoday.co.uk.
The site is using jQuery for general JavaScript sexiness, and the jqModal plugin for the modal dialog boxes. I did also notice some other jQuery plugins on the page (such as jQuery Masonry) but those don't really have anything to do with the modal dialogs.
Here's a very minimal demo to get you started: http://jsbin.com/aqase5
Just an FYI, there are a ton of other jQuery modal window/lightbox plugins if you want something different. A small sampling:
https://stackoverflow.com/questions/756342/whats-your-favorite-jquery-modal-plugin
Fancybox
jQueryUI Dialog
DOM Window
Shadowbox.js
Colorbox
In the case the html is opened in IE I want to use a different style sheet ONLY. However, it seems that it is pulling some elements properties from style.css as well. How can this be? Doesn't the [if gte IE 5] ensure only IEstyle.css is used? What is the best way to fix this?
Thanks.
<head>
<title>!</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="rows.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
<script type="text/javascript">callonload();</script>
</head>
Not totally getting the thinking behind what you are doing, but you need this:
<!--[if !IE]><!-->
<link rel="stylesheet" href="style.css" type="text/css">
<!-- <![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
Basically, "IF NOT IE" for the other styles, and "IF IE" for the styles you want.
styles.css still applies for styles that are not explicitly overridden in your IE stylesheet. The way you put it, styles.css gets always loaded.
To prevent loading styles.css in IE use
<![if !IE]>
source: MSDN
Basics on conditional comments: http://www.quirksmode.org/css/condcom.html