I have style sheet file and would like to disable some css tags in it for IE7 and IE8 browsers, how to do that? I do not want to put these tabs in separated css file I would like to keep then in one file.
I'd recommend the approach taken by the HTML5 boilerplate, outlined here by Paul Irish. Basically, set up your document like this:
<!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 class="no-js"> <!--<![endif]-->
You now have classes in place to accurately target only certain versions of IE. Your css will look like this:
.element { margin-bottom: 20px; }
.lt-ie8 .element { margin-bottom: 10px; }
You then avoid CSS hacks, and can keep everything in a single stylesheet.
As #Daniel states, this is not disabling styles, but over-riding them. If for some reason you want to send styles to only modern browsers and newer IE, you could add another class to the final html tag above, and use that.
If you try to have specific style-sheets only for IE it goes like this:
<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen"><![endif]-->
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"><![endif]-->
More about this here: How To Create an IE-Only Stylesheet
.element {
margin-bottom: 20px;
margin-bottom: 10px\9;
}
Info from here: http://www.impressivewebs.com/ie7-ie8-css-hacks/
You cannot disable them, but you can override them
Related
Can any one help me , please.
how to apply the height css property on ie9 just and do I can use conditional css inside css file?
You can't do conditional css in the css file, but you can give each version of IE its own class. Just put this at the top of the HTML file:
<!doctype html>
<!--[if !IE]> <html class="not-ie" lang="en"> <![endif]-->
<!--[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"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
Now all you need to do in your css file to target ie9 is this:
.ie9 div.whatever {
height: some value;
}
I don't have a conditional CSS solution that can be done within the same CSS file. However, if you're not adverse to it, you could create a second CSS file specifically for IE9, and use conditional comments to apply the CSS. For example:
<link type="text/css" href="style.css" rel="stylesheet" />
<!--[if IE 9]>
<link type="text/css" href="style-ie9.css" rel="stylesheet" />
<![endif]-->
In this example, you would put whatever changes to height into "style-ie9.css". That stylesheet would only be applied when the browser is detected to be Internet Explorer 9.
Let me know if you have any questions, and I'll be happy to help further. Also, here's a link for more information on conditional comments, if you want a better understanding of them.
CSS Hack
As long as you do not want to set font or background just for IE 9 a combined :root hack will help
.somebox {
regular
definitions
here
}
:root .somebox{height:100px \ ;}
Conditional HTML Comment
Putting this in your head section after linking of the regular css file(s) will overwrite definitions only when IE 9 is used:
<!--[if IE 9 ]>
<link href="css/ie9only.css" type="text/css" rel="stylesheet"/>
<![endif]-->
ie9only.css must contain the IE 9 specific rules, of course.
Similar approach but using style tag instead of linking external file:
<!--[if IE 9 ]>
<style>.somebox{height:100px;}</style>
<![endif]-->
I am wondering if there is a way to conditionally import CSS files for IE7/8 at the CSS level instead of using IE conditional comments.
I'd like to create a SASS solution for loading Google Fonts, but to make them work in IE7/8 requires that different styles be loaded separately. This however is undesired when not needed due to latency and Opera rendering issues.
I am unaware of another way of conditional loading IE specific styles. You've got two options but both use conditional comments.
Load a separate stylesheet
<!--[if lt IE 9]>
<style type="text/css" src="bacon-ie.css"> </style>
<![endif]-->
Add IE class names
<!--[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 gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->
And then use them to add specific browser styles.
.ie7 .make-work {
zoom: 1;
}
Without:
adding any markup element there;
without using display: inline-block;
without knowing the div width;
no hacks. the code should validate.
How can we center those three divs horizontally, but making them INLINE ?
http://jsfiddle.net/mMPMh/
Please note:
The reason that I'm avoiding inline-block, lies on the fact that IE7 should behave.
Other rules that don't work on IE 7 should also be disregarded.
Is it possible ?
Like this - http://jsfiddle.net/mMPMh/10/
Or this - http://jsfiddle.net/mMPMh/14/ ?
This one works with IE7
As for hacks, it can be served using conditional statement like
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Or using this on your HTML (from HTML5BP)
<!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 class="no-js"> <!--<![endif]-->
And serve the style like this :
.lt-ie8 #one,
.lt-ie8 #two,
.lt-ie8 #three {
display:inline;
zoom:1;
}
No hacks
UPD:
After you update your questionyou can use for IE display:inline;, maybe it will resolve your issue?
Like this - http://jsfiddle.net/mMPMh/4/ ?
remove float, set clear, and give if you need height and width.
This is just a quick question for clarification really, I have a style sheet for ie7 and need to call it when someone is browsing via IE7, would the following in my application/layouts file call the ie7 stylesheet?
<!--[if lte IE 7]>
<%= stylesheet_link_tag "ie7", :media => "all" %>
<![endif]-->
Yes, that should only bring in that stylesheet for IE7 and older browsers.
I find it's generally better to add a conditional class to the html tag via the following snippet, and then precede your IE rules with .lt-ieX. This allows you to keep all your related rules together in the same stylesheet.
<!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> <!--<![endif]-->
e.g.
.alert {
color: red;
}
.lt-ie7 .alert {
color: blue;
}
I have two tables that need to line up side by side. In order to achieve this I have to specify a td height.
In IE the height should be 2.1em. In Mozilla it needs to be 1.76em.
There does not appear to be a
-moz-height:1.76em;
Any idea how I can achieve my goal?
You can put the IE height into a separate stylesheet and load it after the default one, using IE-conditional comments so the other browsers ignore it. Otherwise, you can use jQuery to change the height after it's loaded (if ($.browser.msie))
Yes it is. For Fire Fox do this:
#-moz-document url-prefix() {
//Your css here
#my-id { font-size: 100%; }
}
For IE you can do something like this:
[if IE 8]><link rel="stylesheet" href="DefaultSTyleForIE8.css" type="text/css" media="screen, projection"/><![endif]
This css will only work for IE 8
in mozilla it is possible to change the height for mozilla by height: -moz-calc(470px);
and auto height by height: -moz-available;
I would recommend the html5 boilerplate method,
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
then you can target ie in your css like,
.oldie #myel{
height: 2.1
}
I would shamelessly use IE conditional comments:
<style>
td {
height: 1.76em;
}
</style>
<!-- [if IE]>
<style>
td {
height: 2.1em;
}
<style>
<!endif-->
Here's a list of CSS filters by browser:
http://en.wikipedia.org/wiki/CSS_filter
Browser detect IE using IE's conditional comments and write out separate BODY tags:
<!--[if IE]><body class="ie"><!--<![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->
Then whenever you have a style, you can be more specific by adding the ie class to over-ride only IE:
.mystyle {styles for good browsers}
.ie .mystyle {styles for IE}