I've a test.css file with the following styles:
....
#body
{
font-family:Verdana, sans-serif;
font-size:10pt;
margin:0;
padding:0;
}
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
}
....
For IE the attribute width:100%; is necessary in div#inscreenalertcontainer.
For other browsers this attribute is not required.
Is there any way to do this in test.css with some conditional operators?
Since there are around 100 css files, I dont want to create another 100 css files, specific to IE, just to change one property.
Or is it possible to change in JSP itself.
Here is my JSP code:
<body>
<div id="InScreenAlertContainer">
<table class="inScreenAlert">
<tr valign="top">
....
....
</body>
Use Conditional Comments:
<!--[if IE]>
<style>
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
/*plus other IE specific rules*/
}
</style>
<![endif]-->
This is programmed into all versions of Internet Explorer to serve specific instructions for these browsers. No other browser will pick up on it, it's the best way to tell IE to do something else than what's in the original CSS.
If the parameter doesn't hurt the other browsers you can leave it there.
Or use this to apply it to IE only:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
You can choose for the stylesheet hack or conditional comment (html) to target IE and add a
<style>div#inscreenalertcontainer {width:100%}</style>
in your head tags
add this one to your webpage's header section.
and here is a very good link to see more http://www.quirksmode.org/css/condcom.html
<!--[if IE]>
div#inscreenalertcontainer
{
margin:32px;
padding:16px;
width:100%;
}
<![endif]-->
A common way to target IE is to change your html markup to this :
<!--[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 your css you can just write :
.ie #inscreenalertcontainer {
width: 100%;
}
This technique will allow you to keep your code readable and tidy.
Related
ul li:nth-child(odd){
color:#c0122f;
float:left;
width:48%;
line-height:30px;
font-size:15px;
}
ul li:nth-child(even){
color:#c0122f;
width:48%;
float:right;
line-height:30px;
font-size:15px;
}
there is six li item on my page and i want give 3 shold be left side and 3 should be right side for that i have used nth-child(odd)/ even which i show in my code its working fine in chrome, mozilla and ie9 but it create a problem in ie8 /7
http://caniuse.com/#search=nth-child
They don't support nth-child. You'll need to implement a javascript solution for those browsers, unfortunately.
Sorry nth-child aren't supported in those versions of IE. It included support for these properties later! Not in those versions.
However, here is an alternate way!
Use this script: http://selectivizr.com/ it would enable some CSS properties.
Note: You should always try to search for browser compatibility and some script which would help you use CSS in older versions of IE!
As the other answers mentioned, nth child is not supported in older versions of IE. You could add fallback classes to IE versions if you add IE conditionals to your html tag. Then just do some basic jQuery to add classes.
html
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
jquery
$('.lt-ie9 li:nth-child(odd)').addClass('odd');
$('.lt-ie9 li:nth-child(even)').addClass('even');
css
li.odd,
li:nth-child(odd) {
color: #c0122f;
}
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 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 don't mean conditional comments embedded into the html. I am refering to the conditional code that can be put directly into the css file. Like:
*+html .myClass {} is for IE7
* html .myClass {} is for IE 6
what is the one for IE 8?
What are you trying to achieve? You shouldn't have to hack up your CSS for IE8. I don't think there is a conditional code for IE8 so if you absolutely need to have a style sheet for IE8, you might have to turn to conditional comment.
<!--[if IE 8]>
<link href="ie8css.css" rel="stylesheet" type="text/css" />
<![endif]-->
Conditional comment for the HTML tag, which will allow you to target .ie8 in your CSS:
<!--[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]-->
That is what's currently being used in html5boilerplate.
Also, be weary of the last few paragraphs in Paul's blog post. I agree that you should try to make it work without targeting specific browsers, it at all possible.
According to this site, you can do the following:
.selector {
property: value\0/;
}
There are several similar variants of this hack, but this is the easiest. It’s very easy to remember. Just add the \0/ at the end of a CSS rule.
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.