I have a div that isn't lining up correctly in Chrome, IE and FF. Chrome needs a padding-left:40px; while IE and FF do not. I've been playing with if for a few hours and I know I'm missing something simple.
This is what I've been trying:
<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I've also tried in the normal style.css:
<!--[if !IE]-->
#lower .expo {padding-left:40px;}
<!-- <![endif]-->
or
#lower .expo {width:400px; padding-top:40px; float:left;}
I also tried this:
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->
Interestingly if I do this:
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
IE displays correct but not FF or Chrome. Its driving me crazy. I must be missing something simple but I've been looking at it too long.
Just for the sake of your actual error, it lies in how you are doing the comments. It should be:
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
For a better way than that, here's what I use:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"><![endif]-->
<!--[if IE 10]> <html class="ie10" lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!
UPDATE:
2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single
.oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t
fly. Anyway, our current version..
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
Try downloading this javascript file. http://firststepdesign.org/browserselect.js Then link it in your html.
<script src="browserselect.js" type="text/javascript"></script>
After that go to your css and use these to select specific css for different browsers.
only internet explorer will detect this.
.ie .example {
background-color: yellow
}
Only firefox will detect this.
.gecko .example {
background-color: gray
}
Only Safari and Chrome will detect this.
.webkit .example {
background-color: black
}
Hope this helps if you need to more comment.
Related
Now that Internet explorer no longer supports Condition Tags like <![if IE]><![endif]> how do you guys handle custom code only for IE? I need to insert custom CSS that I want to work only for IE. I couldn’t find any simple solution for this.
OPTION 1 - For IE10
<script>
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
The CSS to style it:
.ie10 .yourclass {
/* IE10-only styles go here */
}
OPTION 2 - For IE10 (The original suggestion)
Javascript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
HTML:
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
CSS styling would be (if any needed):
html[data-useragent*='MSIE 10.0'] .yourclass {
color: blue;
}
Source: css-tricks
For IE 6 to 9:
<!--[if IE]>
IE<br />
<![endif]-->
<!--[if IE 6]>
IE 6<br />
<![endif]-->
<!--[if IE 7]>
IE 7<br />
<![endif]-->
<!--[if IE 8]>
IE 8<br />
<![endif]-->
<!--[if IE 9]>
IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
Not IE 5-9<br />
<!-- <![endif]-->
I'm working on a page here is the skeleton inside of the body tag:
<div id="site-nav-container">
<nav id="page-navigation"></nav>
</div>
<header id="site-header"></header>
<div class="content-container clearFix">
<section id="blog-post-sum"></section>
<aside id="site-sidebar"></aside>
</div>
<footer id="site-footer"></footer>
So here is what I am facing: For styling purpose I had to float the section with "blog-post-sum" id to the left and the float the aside with the id "site-sidebar" to the right. To prevent margin collapse I wrapped the section and the aside tag in a div container and gave it a "clearFix" class so that I could use a clear-fix method. The method I used is as follows:
.clearFix:before, .clearFix:after {
content: "";
display: table;
}
.clearFix:after {
clear: both;
}
<!--[if lt IE 8]>
/*For IE < 8(trigger hasLayout)*/
.clearFix {
zoom: 1;
}
<![endif]-->
It works like a charm but the problem is if I try to put this method in the begging of my css file then the styling rules right after the clear Fix method breaks. Just like that! So please help me to find out the solution to solve this problem.
You have invalid comments in your CSS:
<!--[if lt IE 8]>
...
<![endif]-->
This is a comment for an HTML file. It won't work in your CSS file.
You can either move that entire comment chunk into your HTML file (don't recommend) or consider using another way to target less-than ie8 browsers. Here's how boilerplate used to handle this until recently (in your HTML file, replace your <html> tag with this):
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
This adds a class to the HTML tag indicating the browser. Then you can target it in your CSS like this:
.lt-ie8 .clearFix {
zoom: 1;
}
I'm using the conditional statement here to add i.e. browsers css styles
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
If I test in emulators this conditional statement doesn't seem to work, the html tag doesn't have the 'lt-ie9' class.
If I test in products like browserstack the conditional statement seems to work and I can see the text thats is shown with the class .lt-ie9
Is the conditional html tag correct? Should I not trust the emulators
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.test{
color: red;
display: none;
font-size: 2em;
}
.lt-ie9 .test{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="test">IE8</div>
</body>
</html>
Without knowing the emulators in question, there's no way for us to know. Your best course of action in debugging is to copy down that code into the body and replace the html tags with something visible:
<!--[if lt IE 7]> IE, Less than 7<![endif]-->
<!--[if IE 7]> IE 7 <![endif]-->
<!--[if IE 8]> IE 8 <![endif]-->
<!--[if gt IE 8]><!--> IE 9+ or not-IE <!--<![endif]-->
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]-->
Cant Seem to make this work in ie8
I just want my html5 to work but nothing seems to appear do i need to add more css?
<!-- IE Conditional Comments -->
<!--[if lte IE 8]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('footer');
<style type="text/css">
menu, nav, footer { display:block; }
</style>
code.google.com/p/html5shiv
Insert minified distribution shiv in element (after or before your CSS):
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Hope that helps.