In a html page support these browsers Mozilla Firefox14, IE8, Safari5.1.1, Chrome19.
Since to support all these browsers I have to use css hacks in order to maintain the proper alignment of the elements on page.
Below is the css:
For Mozilla Firefox and IE8:
.dis_stats
{
position:absolute;
margin-top:-30px;
margin-left:-190px;
background:#E0E0E0;
width:141px;
height:80px;
_position:relative;
_margin-top:-460px;
_margin-left:115px;
}
For Safari & Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.dis_stats
{
position:absolute;
background:#E0E0E0;
margin-top:-30px;
margin-left:731px;
width:141;
height:80;
}
}
Now what is happening on Mozilla it is running perfectly. But on IE8 it is applying the properties defined for Safari & Chrome and if I remove any of the Safari & Chrome's property then it will pick the same from intended properties (i.e defined for IE8 & Mozilla).
I am not getting any clue why is this happening. Anyone please suggest what is wrong here?
I recommend trying to work out a version that complies with standards and doesn't need hacks.
But if you must hack, you can consider conditional comments specially for IE 8 with separate stylesheet that fixes its problems:
<!--[if lt IE 8]>
<style type="text/css" src="path/to/ie-only-style.css">
<![endif]-->
This doesn't really explain what's wrong with IE, but can solve some IE-specific problems without using too much time (at cost of maintainability).
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 */
}
1.I have the following class in CSS file
.dashboard-area {
width:1200px;
}
I havethe above code / css class wil be included in IE8 browser instead of all browsers. I do not need to give this as separte CSS and makes the thing like. how can I give conditon in CSS code itself to execute in IE browser only.
IE8 css selector
2.border - radius not working in IE8 browser but working in all other higher version of IE.
how can I implemeent "border-radius" to work in all browsers of IE (7,8,9).
Thanks,
You shouldn't do this but you can target IE8 with this:
#media all\0 {
.someSelector {
color: brown;
}
}
Or
.someSelector {
left: -8px\0;
}
IE8 doesn't support border-radius http://caniuse.com/#feat=border-radius but you could use a polyfill like css3pie to achieve it.
Regardless I recommend you to use conditional comments
No idea why :before won't work. My IE8 browser will display it correctly on this page:
http://quirksmode.org/css/selectors/beforeafter.html
but not when I do it on this page:
http://africa.ie
IE8 does support :before.
Two possibilities:
IE is rendering the page in compatibility mode or quirks mode.
Either of these modes will disable this functionality. Add a valid doctype and set X-UA-Compatible to IE=edge to deal with this.
You're using ::before rather than :before.
This is quite a subtle one. The correct syntax is with a double-colon, but at the time IE8 was released, it was a single colon; the official syntax has been changed subsequently. All modern browsers will accept either single or double colon for ::before and ::after to accommodate this historical change, but IE8 is stuck only supporting the single colon.
it works as long as you aren't in compatability mode. If you want it to support more I might recommend the following:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Removing the ::before and ::after selectors seems to get it work in IE8:
p.test:before {
padding-right: 5px;
content: url(http://quirksmode.org/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
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.
Here is the link to my website thats still under development. It runs well in Internet Explorer 8 and 9 as well as in Firefox. The webkit browsers (Safari and Chrome) are not able to display the facebook "like box" properly. The box goes above the dividing line. While in IE7 for some strange reason the search form doesnt float:right.
This is my first website so sorry for any pathetic questions:) Can u also please tell me to write a script for IE6 that would show a message to upgrade to a modern browser because IE6 absolutely messes everything up. Any other suggestions would be highly appreciated. I have used the toolbox theme for Wordpress to develop this blog.
I have used :
time.entry-date {color:#000; font-style:italic; text-decoration:none;}
To change the post date's color to black and remove the underline but the text-decoration:none does not work.
Facebook follow box :
#fb-root {
position:relative;
float: left;
margin-left: 10px;
/* remove: margin-top, z-index */
}
HTML5 elements are not recognised by ie < 9. Add to page <head>:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
JQuery for ie6 message:
if ($.browser.msie && parseInt($.browser.version) =< 6) {
var here = ' here';
$('body').prepend('<div id="message">Please upgrade your browser'+here+'!</div>')
}
Hope it helps.