I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?
I don't want to add another CSS file, I want to change only one property in one class.
.container-wrapp{
float: left;
position: relative;
width: 100%;
padding-bottom:100px;
height: 100%;
}
I tried this but without success:
<!--[if IE]>
<style type="text/css">
.container-wrapp{
float: left;
position: relative;
width: 100%;
height: 100%;
}
</style>
<![endif]-->
For IE10+ you can do the following:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-wrapp{padding-bottom:0;}
}
Demo Fiddle (Note that the text is red only in IE 10+)
#media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.red {
color: red
}
}
<div class="red">text</div>
NB: Using hacks like these are generally frowned upon. Use with caution.
Create a stylesheet file ie.css and use if AFTER the global style definition this way:
<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css'/>
<![endif]-->
This should work.
I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Hope this will helps you!
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.
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");
}
Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.
Related
I have different css styles made for internet explorer to show website properly.
I tried to add tried to add numerous codes into wordpress header php before it worked in Internet Explorer But the problem is that the additional style is read by all browsers, so if the style works in IE, the same stlye works on all browsers.
Is there any way to use one style.css and only set this entry for internet explorer:
#header .menu li {
float: left;
margin-left: 40px;
}
If I put that to the header.php
<![if !IE]>
<style> #header .menu li {
float: left;
margin-left: 40px;
}
</style>
<![endif]>
It overrides additional style.css, so it means that Chrome also obeys this parameters. My site url is virmodrosti.com
Let me know what to do, thank you.
Target ALL VERSIONS of IE
<!--[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]-->
Resource :https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
How can I have CSS conditions based on the browser?
Just for example if the browser is IE:
div{
[if IE ] background-color: yellow;
}
Thanks
I found this page useful for selecting/isolating different browsers (http://browserhacks.com/)
CSS is limited as it is not a programming language (it's a markup language)
If you are using a CSS preprocessing language like sass-lang, scss or less, you can get around that when you are in development. SASS Lang - CSS Preprocessing.
However, in your case, the condition is according to the browser type, (specifically IE).
Now there are some work arounds, such as Conditional Stylesheets [mentioned here CSS Tricks Conditional Stylesheets], or browser detection with javascript (on the front end, but this is considered bad practice).
The Caveat of Conditional Stylesheets is that it is applicable for IE 9 and under (the compatibility was removed for IE10)
Another thing you should also consider is whether you want to provide conditional stylesheets from your backend (and based on your request header, you can determine the browser type).
Syntax for conditional CSS:
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
OR you can create two different css files one for IE specific and other one is common for other browsers.
If browser is not IE 6:
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
If browser is greater than IE 7:
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
If browser is less than IE 6:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
For example
#div {
_height: 300px;
}
What versions of IE will take this?
The underscore hack will only work in IE6. There was a variation of it that worked in IE7:
#div {
*height: 300px;
}
But neither of these are recommended as they produce invalid CSS. It would probably be a far better idea to have separate CSS files and include them conditionally for different browsers:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
For more information on conditional comments, see this article.
I have a stylesheet that contains 10 selector definitions. When I view my website in IE and Chrome (I'm not including FF because it renders exactly like the way it does in Chrome), nine of the ten selector definitions work consistently across all browsers.
The one that doesn't work is defined as such:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
As you can see, there are only two values that are necessary for IE. So I did some research on conditional CSS. I have now taken my style sheet and create a duplicate with the two additional entries for IE.
At the top of my document, I now have the following:
<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>
which is working, but can't I do the conditional statement at the selector level?
I also tried this in the CSS document which also didn't work.
[if IE] a.dp-choose-date {
/* definitions here */
}
Does anyone have any suggestions?
One way to do this is:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />
Notice than I do not have a conditional around the first style sheet.
Within the second style sheet just define the tag as:
a.dp-choose-date {
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
}
Due to the way style sheets work, the browser will combine and apply both definitions.
You can make things easier on yourself by adding classes to target IE, and a nice way to do this is to wrap your opening html tag in conditionals like so:
<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
This allows you to prefix your IE only selector with the version of IE you want to target:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
.ie6 a.dp-choose-date
{
position: relative;
top: -25px;
}
Using IE's if conditionals at the HTML level is probably the best way to fix kinks that IE (usually < 9) has. Conditional comments do not exist at the CSS level. You can also (if you wish) use CSS hacks, but that probably isn't the best solution, as later versions of IE may not necessarily allow those hacks, but may still have the same CSS issues.
By the way, your second if conditional should be written as the following for validation purposes:
<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
The easiest way to implement this logic:
[if IE] a.dp-choose-date {
/* definitions here */
}
is to use IE's conditional comments to write out unique body tags:
http://www.positioniseverything.net/articles/cc-plus.html
So you can end up with something like this:
<body class="ie7">
Then, in your CSS, when you need to over-ride one style, you can do this:
.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}
The benefits of this:
only one CSS file needs to be loaded (saving server requests)
your CSS remains valid (no ugly CSS hacks)
your over-ride styles stay with your good styles, so much easier to maintain
In a CSS file, is there a way to give a specific height for a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?
You can create an IE-specific stylesheet and use IE Conditional statements.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
This way, you basically have two stylesheets; one for IE and other for rest of the standard-compliant browsers.
Hacks could have been used such as:
_height:500px;
*height:500px;
But that is not recommended.
See Also:
How To Create an IE-Only Stylesheet
I have used the following and it worked in IE8. Put the following code within tag.
You can watch the online version from here, http://nazmulweb.com/site5/demo/iecss/
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 1px solid green;
}
</style>
<!--[if IE]>
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 5px solid red;
}
</style>
<![endif]-->
try this
<style>
#mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
#mydiv { height:500px; }
</style>
<![endif]-->
Create 2 css files, one for IE and one for the other browsers
Load the css file according to the browser like described here