Assuming the following code:
<div class="content">
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<div style="height:42px; align:center;" id="logo">
My goal is to make the div with the background swoosh.jpg be a simple div with class=top
I have tried getting the conditional to work myself, however for some reason (syntax?) it is not working properly.
The following is what I have tried
<div class="content">
<!--[if !IE]>
<div class="top">
<![endif]-->
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
I should mention that I cannot use anything other than inline CSS for this application - and have no access to the header.
I think this is how to do what you want but as previously stated, it's not the best way of doing things if you have other options (tested in IE9 - IE10 doesn't work with conditional statements):
<![if !IE]>
<div class="top">
<![endif]>
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
http://jsfiddle.net/APFZh/2/
IE 10 targeting requires a little JS:
<![if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
This appends a class of “ie10” to the html element but you could write whatever you want to the document
http://www.impressivewebs.com/ie10-css-hacks/
Try adding
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
To the top of your HTML doc. Then use CSS like this
.content {
color:red;
}
.ie6 .content {
color:blue;
}
.ie7 .content {
color:green;
}
This way you can keep all of your CSS in one file and your IE classes next to the non IE classes.
Check out this doc from Paul Irish
It would be better practice to just have the div with class="top" but set different styles for it in a separate IE stylesheet as using inline CSS is not recommended.
Put this in the HEAD of your page:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
As to it not working I'd suggesrt making sure you have a valid DOCTYPE at the top of your page as IE is very fussy about that.
An update if somebody still reaches this page, wondering why the ie targeting doesnt work in recent IE browsers. IE 10 and onward no longer support conditional comments. From the MS official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
Related
This question already has answers here:
Conditional IE8 style in original CSS file?
(2 answers)
Closed 7 years ago.
I have a CSS file which will be used by all browsers, now I would like to add an IE8 specific CSS declaration, in the same stylesheet, which is conditionally applied if the user is browsing using IE8. I don't want to add any IE8 specific HTML markup. How can I accomplish this?
\9 is a hack for IE 8 and lower version
for eg.
.class {
color: red; /* this property will work for all browser */
color: red\9; /* this property will work on IE8 and lower version of IE */
}
HTML
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
CSS
.ie7 {
...
}
.ie8 {
...
}
HTML paste the comments on your top of page in HTML file access css styles with .ie7 or .ie9 classes. This is Paul-Irish's way of targetting IE Browsers.
Thanks
~Sahib
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;
}
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.
So I know that IE8 and below does not like inline-block but I read that inline should result in the same behavior. So I modified copied my main.css to main-ie8below.css and changed all inline-block to inline. I use the following code to try and achieve this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/main.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/media/css/main.css" />
<!--<![endif]-->
However, this is not working. It seems that my if statements are incorrect. Is that the case, or am I missing something else?
Here is the HMTL in question (useless stuff removed):
<nav id="main_nav" role="navigation"><!--
<div><img src="" /></div><!--
--><div><img src="" /></div><!--
--><div><img src="" /></div><!--
--><div><img src="" /></div><!--
-->
Here is a fiddle, except without images:
http://jsfiddle.net/bqXsU/
You need to use this way:
display: inline;
zoom: 1;
I guess you missed the zoom: 1 part. And if you are coupling with the existing stylesheet, which goes for all the IE versions and modern browsers, it is good to use this way:
display: inline-block;
*display: inline;
*zoom: 1;
But the problem is that, your CSS might not validate.
I don't understand, which part is the one you didn't understand. Let me explain the three things I used.
Star Hack: Prepending a * in front of the style rule, will make it only visible to IE 7 and below.
Validation Issue: The rules *zoom and *display are not valid CSS properties.
How does this work? In IE 7 and below, this zoom: 1; will trigger the hasLayout property of the element, thereby making it available the width, height, margin and padding.
It turned out to be the fault of HTML5 elements not being recognized by IE8. By adding HTML5shiv I was able to fix it.
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.