I am currently developing a theme for a homepage but ran into a few problems. For whatever reason I have no access to editing the html code itself, and I need to write custom .css for IE (specifically versions below IE9).
I have "two" issues. First one is dual backgrounds. Versions below IE9 can't seem to render them flawlessly. If IE skips the element, this is fine but since the graphic in this element co-works with another element (for a smooth graphical transition), it makes the other element look weird. The graphic in this second element is a background within a div-box. I want this background to be another custom background that's only rendered if the user is using IE as browser; and if possible, I want this to only apply to versions below IE9 (site is rendered with dual backgrounds just fine in IE9).
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS is as follows (#mainframe is the part under the header navigation box). The lower image is how it is rendered in IE8. IE7 shows the same. First one is FF/Chrome/Safari and IE9.
#mainframe {
background: url('img/bg2.png') no-repeat,
url('img/bg1.png') repeat-y !important;
}
I've searched quite a lot on the net, also been asking friends and this does not seem to be working without writing conditional comments within the html markup. Am I missing something? Is this doable somehow with only the use of .css files?
Site is using jquery. I don't know this stuff, but I thought I'd mention it just in case.
You might want to look into this article which explains how to use conditional comments to set classes on the html element. You can then use that class to target specific browsers in your stylesheet, in a clean way.
Your html tag would look something like 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> <!--<![endif]-->
Edit 2
Since the announcement that IE10 will not support conditional comments I though it would be nice to update this answer. I tested the type of comments it will support and it seems that the above will still work, but if you want to target higher than 10 or only 10 you will be out of luck. As suggested by Microsoft themselves on their blog (link in comments #MarcoDemaio) you should use feature detection.
Then you can do something like this in your css:
.somestyle {
background: transparent url('derp.jpg') no-repeat;
}
/* ie6 fallsback class */
.ie6 .somestyle {
background: #eee;
}
Read the article, and good luck ;)
Edit 2:
Since IE7 isn't my greatest concern anymore and IE9 is pretty consistent in its behaviour I can get away wil just the following code (which will add a class only for IE versions less than IE9):
<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->
Edit 1:
Ok I managed to miss your "can't edit html" comment.
In that case you can only use browser specific hacks, I think they're dirty as hell but hey, if you have no other option......
Somthing like this:
.someclass {
*color: blue; /* IE 7 and below */
_color: blue; /* IE 6 */
}
/* IE6, IE7 - asterisk hack */
.someclass { *color: blue; }
/* IE8 - winning hack */
.someclass { color: blue\0/; } /* must be last declaration in the selector's ruleset */
For your dual backgrounds problem, you simply need to add another containing element.
<div class="element">
...
</div>
becomes
<div class="container">
<div class="element">
...
</div>
</div>
I'm not sure why you wouldn't be able to manually edit the HTML, but if you have access to a javascript file and you're using jQuery, you can add the class like so:
$('.element').wrap('<div class="container" />');
You can use CSS hacks to avoid using conditional comments. CSS hacks aren't as commonly used now since the average user uses a browser that doesn't require any hacks to display properly, but it is still a completely valid and reliable way to avoid using HTML conditional statements. Depending on the specificity you want, you have a bunch of different hacks that you can use to only target specific versions of IE:
* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }
So:
#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe {
background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
background: url('img/bg2.png') no-repeat\9; }
I had this problem in my CMS application so...
Create a container div have it's class the browser name and version to be looks like
<div class="ie_6_0">
<div class="your_custom_elements">
///////
</div>
</div>
and do you CSS classes like
.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}
UPDATE 1
or like
<div id="mainframe" class="ie_6_0">
///
</div>
and CSS like
#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}
ie_6_0: as your user browser name and version must request it and add it by code.
Related
I am using simple method to target IE only CSS.
<!--[if !IE]><!-->
<body>
<!--<![endif]-->
<!--[if IE]>
<body class="ie">
<![endif]-->
<div class="Out">My test content
</div>
External CSS
.Out{
width:300px;/*Not for IE*/
}
ie. Out{
width:300px; /*only for IE*/
}
But In FF & chrome developer tool I am seeing body get class="ie" which is wrong.class="ie" is only for IE browsers.
There are number article I have referred
Reference:
https://css-tricks.com/snippets/html/add-body-class-just-for-ie/
https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Detecting IE11 using CSS Capability/Feature Detectionenter link description here
http://www.positioniseverything.net/articles/cc-plus.html .....etc list goes on
I have referred numbers of article but not helping.I think I am missing some things.
I have tried lots of thing from various source and article as I mentioned in my question.
Fortunately what work for me is answer from "SW4" in how-to-write-a-css-hack-for-ie-11
IE 8,9 and 10
.Out {
width:400px\0; /*For IE 8,9 and 10.*/
/* For me above code is also supporting in IE 11 also. However, for IE 10+ browser I have added media query using -ms-high-contrast below*/
width: 300px; /*for other Browsers*/
}
Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.
-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width:400px; /* IE10+ CSS styles go here */
}
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
I have some a tag that are assigned to class like: class='user-home' and I'm using this css to achieve background image:
.user-options .user-home{
background-image:url('../../img/user-home.png');
background-position:center;
background-size: 14px 14px;
background-repeat:no-repeat;
border: none;
}
And the problem- This is what I'm getting on chrome/mozila/ie11
This is what I'm getting on ie7
What will be the solution? Thanks.
The rule background-size is not supported on ie7. It is recommended to use small images (14X14) and not resize it with CSS rules, this way you're saving traffic and improving your page loading time.
There is a workaround (how-do-i-make-background-size-work-in-ie) but I still think it's better to just resize your image.
That's because background-size is a CSS3 property which isn't supported before IE9...
CSS background-size not working in IE7/8
Only solution i think is to edit image to 14px 14px
The browsers like IE7 do not support CSS3 properties. So you cannot use them otherwise you get these types of results.
You need to change the background-image CSS to this:
.user-options .user-home{
background-image:url('../../img/user-home.png');
background-position:center;
background-repeat:no-repeat;
border: none;
}
and now, edit the image resolutions and change its width and height to 14x14 yourself.
Or if you want to use the current CSS, please go to this website from Google:
https://code.google.com/p/ie7-js/
And from there, include the JS needed to make the IE behave like a standard browser, this is the code:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">
</script>
<![endif]-->
This JS will enable almost many of the CSS and HTML attributes. This should be included in head element.
Are you sure it's IE7 not the compatibility view (IE6) anyway background-size wont work with IE7
A way of your question, Earlier I used to use DD_belatedPNG Javascript to fix PNG issues in IE6
you may use one of the following tools to fix all IE issues:
Normalize
ie7-js
respond.min.js
For other HTML5 fixes and Media Query I use excanvas.js and respond.js
Code could be as follows:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
This previous Q about a div positioning problem in IE gave several answers where they told me to use conditional commenting.
How come this relative positioned div is displayed differently in IE?
How does it work, I mean how do I implement conditional comments?
Ex:
<div class="normal"></div>
<!--[if IE 6]>
<div class="IE6"></div>
<![endif]-->
IF it is explorer 6, will this then override the first div with class="normal"?
Because if it wont, then there will be two divs in explorer 6 right...
What could possibly be the problem of this positioning?
I have even tried creating a new html document with a hello world text, and put it inside a div with relative pos, and in IE it behaves differently, about 3px further down than in other browsers...
Thanks
This is normally used to load an extra bit of CSS that "fixes" various issues due to IE6 bugs/lack of features.
eg. the top of our site looks a bit like this...
<link rel="STYLESHEET" type="text/css" href="/css/common.css" />
<!--[if IE 6]>
<link rel="STYLESHEET" type="text/css" href="/css/ie.css">
<![endif]-->
This loads our normal stylesheet first. Next IE6 (only IE6) loads the second stylesheet, which override a couple of definitions that cause problems for IE.
If you need different content, you could include both sets of content (normal content and IE content) and have the IE content hidden by default via your standard CSS (display:none), and simply overide this in the IE6 css stylesheet.
No, it isn't the way to go really.
They're non-standard, they're proprietary, they set a bad example, and they're absolutely unnecessary.
whatever {
foo: bar !important; /* for non-IE6 */
foo: baz; /* for IE6 */
}
child { /* for IE6 */ }
parent > child { /* for non-IE6 */ }
I already know: "Don't use css expressions!" My question is not about whether I should be using an expression or if there is an alternative; my question is simply: Can I get a css expression to only be evaluated in versions of IE prior to version 7 without using conditional comments?
I occasionally use an underscore hack to hide a rule from IE7 but IE7 seems to evaluate expressions anyway. For example, _width:700px; is ignored by IE7 but _width:expression('700px'); is still evaluated.
I know that someone will try to tell me to just use a conditional comment to include the rule, but I am looking for a way to do this without placing a single style rule into a separate file.
A note for those of you who still don't want to let it go: I've chosen to use a css expression, but I didn't do so lightly. I understand the implications and I am using an expression that only evaluates once. Stop worrying about my bad decisions and just answer the question already... ;-)
I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).
/* IE6 only */
* html .myClass {
width: 500px;
}
I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.
As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.
You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.ie6 {
display: none;
}
* html .ie6 {
display: expression("block");
}
* html .ie7 {
display: expression("none");
}
</style>
</head>
<body>
<div class="ie6">
This is IE6
</div>
<div class="ie7">
This is Firefox or IE7+
</div>
</body>
</html>
You don't have to use conditional comments to add a new file. You could easily add a conditional comment to add a class to the body tag, as follows:
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gt IE 7]>-->
<body>
<!--<![endif]-->
Then in your CSS you can simply define a different style for IE7 on any element you like:
#content {
width:720px;
}
.ie7 #content {
width:700px;
}
You still load the same stylesheet, but you can style elements based on their browser.
You could even extend this to have differnt styles for IE6, 7 and non-IE browsers.
You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:
.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}
I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.
If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)
#myDiv {
height: 3.0em !important; /* non-ie */
height: 2.6em !ie-only; /* ie7 */
height: 2.4em; /* ie < 7 */
}
This answer may be what you are looking for:
In-line CSS IE hack