I'm trying to use conditional comments to hack IE7 into behaving like a real browser.
But the last few days, IE7 is ignoring conditionals referencing it, and responding only to conditionals targeting IE8.
My header has:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
The conditionals are:
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Which is NOT recognized in either IE7 or 8. But if it's
<!--[if IE 8]>
<link rel="stylesheet" href="/css/ieHacks.css" type="text/css" media="screen" />
<![endif]-->
Then the stylesheet is rendered in both IE7 and IE8.
Any ideas? I'm stumped.
I've had problems with IE8 not reading the IE stylesheet, so now I prefer to add a class for IE on my main stylesheet. It is easier to maintain code with one stylesheet anyway. Paul Irish explains it better but basically you put this:
<!--[if IE]> <html class="ie"> <![endif]-->
where your conditional stylesheet link was and then in your css you add the ie class for every IE-specific change you need. So let's say your padding is normally 6px but for IE you need it to be 4px, your css for that div would look like:
.someClass {padding: 6px;}
.ie .someClass {padding: 4px;}
You could also use a CSS hack to target IE7 only from within your main stylesheet:
*:first-child+html { /* Apply IE7-only CSS here */ }
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'm working with responsive website. I've used media queries for making that responsible. Basically, I haven't used any fixed width. I've used percentage as a width of every div.
So that the website can be scaled proportionally according to resizing of browser. For using percentage of wide may be caused problem for older ie. As ie prior to ie 9 don't support media query, so, I want to build the non-scalable version for those ie. As I gave only few code for bringing scalability, so is it okay if I write the CSS code at my main stylesheet under/at anywhere with my default CSS?
Like at style.css:
#info {
width: 13.672%;
/*if ie9 and lower
width: 175px;*/
height: 830px;
/*if ie9 and lower
margin-right: 40px;*/
margin-right: 3.125%;
float: left;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
max-width: 100%;
/*if ie9 and lower
max-width: inherit*/
height: auto;
/*if ie9 and lower
height: inherit*/
}
I want to write that format. But, I don't know the correct format. Please, tell me the correct format.
Another question to you. As those version of ie don't support the media-query, so the meta tag
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />
with tablet.css, mobile.css don't create any problems for those older version ie, isn't it? I mean I want to write IE special css only at my main stylesheet (KT2012.css). Should I write every IE special css at every stylesheet like at mobile.css, tablet.css etc? If that devised based css file don't support at older ie, so, I don't do any things with that device/viewport based stylesheet if I make non-scalable version for ie, isn't it?
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-ie9 .element { margin-bottom: 10px; }
You then avoid CSS hacks, and can keep everything in a single stylesheet.
One way to do this is with Conditional Comments.
IE <= 9 (is the only browser vendor that) supports them, which you can use to specifically target any version(s) of IE. For example
<!--[if IE 9]>
Special instructions for IE 9 here, for example load a specific CSS file to override rules only for IE 9
<![endif]-->
IE 10 has dropped support for them though.
More recently the HTML5 boilerplate introduced a class based approach to avoid the multiple stylesheets (i.e. HTTP calls) issue and fragmented CSS rules that conditional comments tends to create.
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
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}
I tried putting the IE conditional in a CSS file, but that didn't appear to work. Is there a construct for CSS so you can tell it to use this background color if the browser is IE? I also couldn't find anything on if then else conditionals, does it exist? Can someone provide an example.
The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.
Example:
<head>
<style type="text/css">
#import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
I've taken my cue from jQuery and use my conditional formatting to create container elements
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
then I can put the conditional information in css like such
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
There's no such conditionals in CSS, but you can use the "Holly hack" if the differences between various versions of IE aren't significant:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
The [conditional comments](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) are HTML comments and thus cannot be used in a CSS context.
If you want to aim specific CSS rules just to IE, you have to use CSS hacks.
I would recommend to use something similar to the solution proposed by bendewey, but go for conditional classes around the html tag instead. As far as I know this was first mentioned in Paul Irish's Blog ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )
<!--[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]-->
and then in the css you use:
.box {background: blue;}
.ie7 .box {background: green;}
This has some advantages in comparison to the solution using an extra div. For the details check the post above.