I am trying to style my WordPress website to be displayed properly in Internet Explorer 8 and all versions below.
I have created a separate ie.css file but I am having problems styles to be read only when opened from IE.
In the head of my document I have included:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
When viewed from IE, the website is acting as this doesn't exist.
But when I insert this in to the head, all the styles appear in IE (that are meant for IE) but also in Chrome, Mozilla, etc..
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css" media="screen" />
Any advice?!
Try
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->
or
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->
Related
I have an exercise question which is:
Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7
I'm beginning to think this is a trick question as after much googling, the only conditional browser code I can find goes in html like this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
Although this didn't actually work for me as vis studio just processes this statement as a comment. As far as I can tell it's not possible to write a css snippet to do this, am I right?
I really should not be giving you the answer to a quiz... but
<!--[if IE]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie8">
<![endif]-->
<!--[if IE 9]>
<div class="ie9">
<![endif]-->
<!--[if gte IE 8]>
<div class="ie8plus">
<![endif]-->
<!--[if lt IE 9]>
<div class="ie9lower">
<![endif]-->
<!--[if !IE]> -->
<div class="not-ie">
<!-- <![endif]-->
</div>
I'll leave the CSS rules to you ;)
Use different css files for any version IE
<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->
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'm currently running this code. I also have an external stylesheet that applies all my styles of the page correctly but i'm running in this issue at the moment.
When i call .ie9 as a class in my external stylesheet and want to apply a gradient style to it, it isn't running my code in the Internet Explorer emulation.
However when i run the code not in the .ie9 class the code actually works so i made some mistake somewhere. Perhaps you might know what the issue is here.
HTML Code:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="nl-NL"> <!--![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS Code:
.ie9 {
.section-example{
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80c9db', EndColorStr='#30aac8');
}
}
The problem was actually different. Internet Explorer 11 emulator does not load conditional html statements for some reason.
May it works for greater than ie9:-
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
or
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'template_url' ); ?>/css/ie9.css" rel="stylesheet" type="text/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.
I need the browser to download the appropriate script for the client browser.
I need some kind of switch statement that would work?
I have ;
(common.css) All browsers script need this file
(ie6.css) IE 6 script
(ie7.css) IE 7 script
(ie8.css) IE 8 script
(ie9.css) IE 9 script
(other.css) Mozilla + Firefox + Safari use the same for all versions
i have (but doesnt work)
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<!--[elseif IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<!--[elseif IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<!--[elseif IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<!--[else]>
<link rel="stylesheet" href="other.css" type="text/css" />
<![endif]-->
Q. Ive hacked the above code from another file but cant get it to work?
If ive got it wrong, is there a better type of switch statement that can be used?
I'm fairly certain that you have to do each condition separately, and not in a switch statement
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
<!--[if IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->
<!--[if IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
If not IE
<!--[if !IE]> -->
<link rel="stylesheet" href="other.css" type="text/css" />
<!-- <![endif]-->
<link rel="stylesheet" href="common.css" type="text/css" />
<!--[if IE 6 ]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
<!--[if IE 8 ]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->
<!--[if IE 9 ]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" href="other.css" type="text/css" />
<!-- <![endif]-->