I am experiencing a problem when trying to load a style sheet specifically for IE. I have a css file for IE7 and one for IE8. Now the browser on my desktop is IE8 and I am using developer tools to switch between IE7 and IE8. In developer, I can see that the conditionals are not being recognised because if I make an amendment in one of the the css files, no changes take place even after cache removal. Is there something simple I am missing here?
I have also tried before all other css files and after and included an X-UA line.Hope someone can help. Thanks
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if IE 7]>
<link href="/domain/users/css/jmenu/css/ie7_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE7</p>
<![endif]-->
<!--[if IE 8]>
<link href="/domain/users/css/jmenu/css/ie8_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE8</p>
<![endif]-->
Related
I developed a site using simple HTML, CSS, javascript and PHP as backend language. Lately there has been an issue, the site seemed to be not loading any stylesheets, but there was no error in console that..the css files were loading normally. I tried clearing the cache and it solved the problem. But i faced the issue once again. Again i tried clearing the cache but the problem dint get fixed. I tried disabling the cache in devTools, still no solution. The site is continuously taking inputs from the cache, even if I try changing something for example the font size or anything it reflect the changes. Can somebody please give me a solution. Here is a screenshot
enter image description here
<?php ob_start(); ?>
<!doctype html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
<html lang="en">
<head>
<!-- Basic -->
<title>Margo | Home</title>
<!-- Define Charset -->
<meta charset="utf-8">
<!-- Responsive Metatag -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Page Description and Author -->
<meta name="description" content="Margo - Responsive HTML5 Template">
<meta name="author" content="GrayGrids">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
<!-- Revolution Slider -->
<link rel="stylesheet" href="css/settings.css" type="text/css" media="screen">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
<!-- Slicknav -->
<link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
<!-- Margo CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/customstyles.css" media="screen">
<!-- Responsive CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
<!-- Css3 Transitions Styles -->
<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen">
<!-- Color Defult -->
<link rel="stylesheet" type="text/css" href="css/colors/red.css" media="screen" />
<!-- Color CSS Styles -->
<link rel="alternate stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
</head>
Try this
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
Taken from: http://www.php.net/manual/en/function.header.php
i don't know weather it will work or not but give a try with pressing Ctrl+f5 once on browser :)
it will refresh a page with new code.
I've been doing a bit of reading around this subject, and I can't seem to find an answer that specifically answers this question.
Using this code as an example:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
Would IE6 open and run it-style.css and style.css, and if not, why not? Also, does the order in which you place conditional and non-conditional stylesheets matter?
Yes it will open both.
Whatever style sheet is placed last has higher priority.
If this attribute was in ie-style.css
body {
background:#000000; //black
}
and this attribute was in style.css
body {
background:#FF0000; //red
}
and this is what the order of style sheets were in your <head>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
then the body will be red even if you were on IE.
Some of my CSS elements don't work in IE8. So I am using a conditional style sheet to set display:none for them; however, this affects everyone using IE browsers no matter the version. I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
<meta name="description" content="web description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
Where am I going wrong?
My understanding is you want to target all the old IEs including IE8, so lte IE 8 (lower/equal) would work. You can also merge that lt IE 9 into the above one actually, like this:
<!--[if lte IE 8]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
For debugging, you can try to add something like body {10px solid red !important;} into your ie8.css and to see if that applies to the correct browsers.
[if lte IE 8] means that the stylesheet is added if version of IE is less than 8. You need the [if IE 8] conditional.
I'd like to detect if the user uses IE or another browser. So just after
<!doctype html>
but before
<html lang="pl-PL">
I put this code:
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>
<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style-ie.css" />
<![endif]-->
But it doesn't seem to work. What am I doing wrong?
The <link> tag should be a child of the <head> tag.
<html lang="pl-PL">
<head>
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>
I have this code with conditional comments for IE7 and IE8:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/ui.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link href="css/ie8fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie7fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Stylesheets in conditional comments are not working. I tested this in IE Tester.
Actually, Microsost doesnt support Conditional comments any more. I was kind of stuck myself for a while, so I wrote an an article about it:
http://www.yofiel.com/writing/essays/microsoft-s-exit-strategy
IETester is based on an unsupported hack that has incorrect behaviors in some cases. Have you tried testing in a real browser? Microsoft provides the VMs for free at http://modern.ie.