I have a code:
.cl_Label{
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
it's work in chrome but, ie 11 a property width not work correctly. I try:
<!--[if lte IE 8]>
<link href="../css/only-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
but the css file not load.
What should I do? Tnks
Conditional Comments are no longer available for IE 11. MS has dropped conditional comments as of IE10. You can check from here
Related
I am testing css with conditional comments on internet explorer 9 using emulation mode, however it seems to render the css on screen as text. why is this happening?
<!--[if IE]>
.path2 {
font-weight:300;
}
<![endif]-->
Because conditional comments are rendered as HTML, not CSS. So if you want styles, you have to add a style tag:
<!--[if IE]>
<style type="text/css">
.path2 {
font-weight:300;
}
</style>
<![endif]-->
How to write the sintax on the css property like:
.example{
/*all the browsers except IE*/
font-size:100%;
/*that's on all the IE syntax I need to add like a condition*/
font-size:200%
}
That's a simple code I know, that's only to test it, but not on the html, on each property in a class, id or tag on the css.
In ie6 it's:
#test{ _color: blue}
in ie6 and ie7:
#test{ *color: blue}
ie6, ie7 and ie8:
#test{ *color: blue\9}
But how to difference between all IE and the other browsers?
Anyone can help?
Use conditional stylesheets
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target ALL VERSIONS of IE less than IE10
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Since IE10 ignores conditional comments you can try this solution.
Learn more about it here.
I have following css selector
body
{
margin: 0;
font-family: "Arial" ;
font-size: 18px;
line-height: 25px;
}
I want to write condition that if the browser is IE then change the line-height to 10px
I searched one similar question here but when i add the condition like mentioned in the question
it throws syntax error Missing property name before colon(:). I followed question and modified code like
.bodyClass
{
margin: 0;
font-family: "Arial";
font-size: 18px;
line-height: 25px;
<!--[if IE 6]>
line-height: 10px;
<![endif]-->
}
How to write the conditional statement inside css selector? I dont want to create different style sheets for IE and rest of browsers
If you don't want to create separate stylesheets then you have two alternatives.
IE conditional comments
Use conditional comments to give classes to the <html> tag, for example:
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
This way you can then use nice self-describing selectors like this in your CSS:
html.ie6 .bodyClass { line-height: 10px}
CSS hacks
Another option is to use appropriate CSS hacks to target the browsers you are interested in. The advantage of this approach is that it can be done without touching the HTML/DOM at all. One specific hack that targets only IE 6 while still being syntactically valid CSS is:
.bodyClass { _line-height: 10px; /* hack targeting IE 6 only */ }
If you do decide to use CSS hacks, please make sure to accompany them with comments that describe what they do to help future maintainers.
Try this out:
*line-height:10px; //* is hack for IE7
line-height:10px\0/; //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers
#media screen and (-webkit-min-device-pixel-ratio:0)
{
line-height:10px;
}
You can write them inside headers and there join a stylesheet such as
<!--[if IE 6]>
<link href="~/folder/file.css" rel="stylesheet" type="text/css" />
<![endif]-->
Else if you can use a serverside such as ASP.NET and by Using Request.Browser check whether if its IE and change the style.
Try <!--[if lte IE 6]>
Or you could try the opposite and add the line height as 10 then use
<!--[if !IE]>-->
do something; IE will ignore this, other browsers parse it
<!--<![endif]-->
to set the line height for other browsers.
Below is a link to Supporting IE with CSS
http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/
Another Useful site is http://css3please.com/ which shows you the different CSS for IE, Chrome and Firefox. It also allows you to edit the site in real time.
#testdiv
{
height:300px;
width:100%;
line-height:50px;
line-height:100px\9;
}
Demo Fiddle
i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />
<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
<link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
<link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
Here is a good overview of CSS browser hacks:
http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:
.el { display:inline-block; *display:inline; *zoom:1; }
There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:
.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.
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.