i made web page and styled it using CSS3 (gradients, image-border, text-shadow etc.). Our work browser (IE9) totally ruined the look of it. Don't you please know how to fix in css that when browser is lower than IE10, don't use this set of styles but this set of style? Thanks a lot :)
There are differents solutions.
1 IE Conditional Comments in the "head"
ex:
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
2 CSS Rules Specific to Explorer (IE CSS hacks)
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.
ex:
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
In my opinion the second one is the best way!
You can fix it using this conditional statement
<!--[if lte IE 9]>
// Your css for IE9 and below or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
you can apply text shadow using
.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
Complete documentation
gradient can be applied as
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
The border-image property is not supported by IE, check: this
you can make it possible using css3pie for you to use a border-image in IE 6-9
Related
Actually I need to specify this property
margin-left:-20px;
only for the IE-11 and the rest of the properties for all browsers in CSS file
.navigator li a span {
display: block;
float: right;
width: 80px;
height: 50px;
margin-right: -10px;
margin-left:-20px;
}
Is there a way to do that, as I tried many solutions and didn't work
Thanks in advance!
I wrote is very simple and only supported by IE 11+
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
// or you can try this
<style>
#media all and (-ms-high-contrast:none)
{
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 and greater CSS Hack
<div>
So the text shows up in blue with internet explorer 11 and greater. Have fun with it.
for more reference you can look around with given link
Reference
It sounds like your problem could be solved in some other way than browser-conditional styles, please try that first, but in any case:
For IE 10 and 11, you can use this:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Note though, that it will recognize both IE 10 and 11.
source: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
You may also want to take a look at this:
http://marxo.me/target-ie-in-css/
For IE 9 and lower, you can use this:
You create a separate stylesheet for that, and then you use this to include that in your HTML.
source: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example, if you wanted to target IE 7, you would do this. You can just change the version number to what you will.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And then you can also target lower or higher versions than a specific version:
Lower than IE 8 and IE 8:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Higher than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Note that you can use lt, lte, gt or gte.
I have a problem with IE8, so I need to apply some css only if browser is not IE8
In html I can do it using
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
But I want to filter this using CSS
Is there a way where I can instruct browser apply these styles if its not
IE8 ?
For example, how can i make this css not have any impact in IE8?
#font-face{
//some css
}
Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), but if you want to do it all in the stylesheet, there is a way:
body {
color: red; /* all browsers, of course */
color: green\9; /* IE only */
}
The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.
EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :root hack:
:root body {
color: red\9; /* IE9 only */
}
Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.
IE6
Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
For More Information
http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
IE 8 doesn't support media queries - you can use that (just insert your CSS inside some broad media query).
Have a look at list of browser-specific CSS hacks here or here.
Below I copy-pasted some concerning IE 8:
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
For only IE of specific version best way is to use conditional comments in HTML, like this (and like you mentioned):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
But also you can do in this way for IE 8 only:
#media \0screen {
body { background: blue; }
}
More info here : http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
interncup-thc.ucoz.com
Under Brackets, around the text it should have been a green shadow which on chrome/firefox displays but on IE doesn't. I have IE 10
What's wrong? trying to fix this for one day already.
You are going to have to change your HTML so that it detects if it is IE or not and applies a corresponding class as necessary. It will add a lot more to your CSS, but it is going to have to be necessary for IE compatibility.
If you want to cover all versions of IE Then you would do something like the following:
Replace your <body> tag with this:
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9) ]> <body class="modern"><![endif]-->
<!--[!(IE)]><!--><body class="notIE modern"> <!--<![endif]-->
And you would apply for example:
body.ie6 #box,
body.ie7 #box,
ody.ie8 #box {
/* This contains the color of the shadow in the CSS3 syntax */
background: #cccccc;
/* This contains the blur-radius in the CSS3 syntax */
zoom: 1;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=5);
/* You must remove the border in IE, since it will be replaced in the next rule */
border: none;
Here is a very good reference on How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript.
I am creating a webpage to work in IE7. I want to vertically center a span (which may be several lines long) in a speech bubble. I have achieved this in modern browsers by setting the line-height property of the span's parent to the height of the span's parent itself. The span is then given the display property inline-block, its line-height property is set to something which corresponds to its font size and its vertical-align property is set to middle. However, when I try to view it in IE7, the line height of the span's text seems not to be that of the span and instead is that of the span's parent. It is as if the span did not have the inline-block display property as this is what you would expect if it was inline. As the span element is inline by default, you would expect the inline-block property to work in IE7 but it does not. I have tried applying things like zoom: 1; and the 'cross-browser inline block' suggested by css-tricks but none of this works. I am seriously considering using a table but that is really not something I want to resort to.
You can take a look at the issue at http://jsfiddle.net/sAuhsoj/bWdwE/ (you may want to view the fullscreen version http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ using browserlab.adobe.com to see how it looks in IE7)
To target IE7 with a CSS hack, you can add this display rule:
*display : block;
a so written *property is processed by IE7 and lower only.
May i suggest you to use conditional comments on <html> tag?
Personally, i use:
<!--[if lt IE 8]> <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->
Then i can target any IE browser this way:
.ielt8 .anyClass {
/* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
/* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
/* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
/* any rule here will effect ie9 only */
}
.ie10 .anyClass {
/* ie10, for future reference */
}
.ie .anyClass {
/* any ie but 10 */
}
That's really easier and you don't have to use hacks, which is better for validation and will exclude any future possible interference.
In your case, you could set up a completely new style for IE7, like
.userQuote .quoteText {
display: block;
line-height: a pixel value;
}
The issue in this particular case is the use of the rem unit on the line-height attributes.
By simply changing rem to em, it solves the issue in IE.
http://jsfiddle.net/bWdwE/2/
In IE8 when I set the border of my input fields like that:
input {
border: 0;
}
There is no border around the input fields like desired, but I would like an standard outline like in Chrome or Safari whenever the focus is on an input. Now, I could add a border via pseudo class :focus, but I do not want that pseudo class apply to browsers that already have a standard outline.
How can I accomplish that?
EDIT: I just found out that :focus is not working in IE8. I have to add a DOCTYPE to get it working.
To target ie8 specifically you can use this method
Add an ie8 class to your html tag and inherit from that.
On your html tag
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
Your css
.ie8 input:focus {
//your styles
}
You can include the style in a conditional CSS stylesheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Then in that external stylesheet, include your CSS like:
input:focus { border: 1px solid golden; }
focus should work in IE8. Add the doctype and see.