here's a landing page I've coded up:
http://rsa-partner.com/
It all looks fine in every browser bar IE8. In IE8, the advanced CSS selector 'nth child' is not recognised.
I downloaded and linked selectivizr.js (http://selectivizr.com/), which should have sorted it in ie, but alas, the background images that show on all my nth child selectors are not showing. The code is
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
Is there something I'm missing? I swear I've used conditional IE specific comments before and got nothing back. Any suggestions would be much appreciated.
Of course I could simply remove my nth child selectors and replace with specific classes but I'd like to avoid that if possible!
If your content is loaded in dynamically (like if you are using a CMS system), then it gets loaded after Selectivizr is run, and therefore it won't work.
From selectivzr.com:
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected.
I recommend using Modernizr instead. You can check for css-lastchild and customize the styles if the browser doesn't support it (together with the rest of the CSS3 selectors, like nth-child, etc.). I share your pain though!
Related
I've modified code from this tutorial which animates a sliding div so that it works as a toggling menu. I was hoping it would degrade into normal hide-show in IE9. Which it is. But only one time. If I click the first button, it will toggle its div on and off. It works for all four like that. But after that first toggle, IE fails to show the divs again. I can verify that the ng-click is working through logging the index of the clicked button. For some reason though, it appears that the display property isn't being set to block. Is there a known issue where ngAnimate causes IE9 to break without an error, or have I missed something obvious?
JSBIN
In angularjs site you will find this:
Although most modern browsers have good support for CSS transitions
and CSS animations, IE9 and earlier do not. If you want animations
that are backwards-compatible with older browsers, consider using
JavaScript-based animations, which are described in detail below.
practical: if you remove this line : transition: all 0.8s; you will see that all the browsers behave the same way.
Solutions:
Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations as you can see here, but is support conditional comments, so you could put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.
<!--[if lte IE 9]>
<script src="animation-legacy-support.js"></script>
<![endif]-->
Or you can use the modernizr library like this:
if(!Modernizr.csstransitions) { // if not supported.
//ADD YOUR javascirpt-based CODE HERE
}
or you can just make all the animation with jquery, use jquery 2.x for ie9+ or jquery 1.x for ie6+ as you can see here.
Note: An example with angular and jquery animation can be found in Animating ngClass with JavaScript chapter in angularjs site, in the bottom.
As far as I know css transitions are not supported in IE9 and earlier. So if you want to support these browsers you might use jQuery animations instead.
Hope this would be helpful.
I'm adding .css files with javascript to the head and order them with the highest priority last and the least prioritized first.
Like:
base.css
theme.css
responsive.css
And this works fine with every browser I've tried apart from IE (I've tested IE8,9 and 10) but If I reverse the order:
responsive.css
theme.css
base.css
It works in IE(8,9,10) but that doesn't work in every modern browser.
Is there any IE priority bug? If I statically add the files without the problem, so it seams to be a javascript problem but just for IE.
Anyone know about this problem or even a solution?
One solution is first check with javascript what kind of browser there's used.
BrowserDetect.browser
And after that use an if-else statement..
if(IE){
responsive.css
theme.css
base.css
}
else{
base.css
theme.css
responsive.css
}
It's because older versions of IE don't understand media queries, which are used in the responsive design, I guess in your responsive.css you have things like #media screen and (min-width: 960px).
Normally conditional comments are used to detect if the current browser is IE (and it's version) and load a css file or not.
Personally I like the mobile first philosophy when doing responsive design, there's a sample tutorial: http://gomakethings.com/mobile-first-and-internet-explorer/
This is called Progressive Enhancement. Doing the css for the simplest platform first, and adding up things for the newer browser.
If you want options there is another practice called Graceful Degradation, which is the opposite, having the full featured CSS and ignoring / removing those features for the older browsers.
You should google a bit about both those practices to understand them better if you really want to do clean and good responsive design
There must be another problem somewhere, because IE and other browsers do not differ in the way they cascade style sheets. Please create a JSfiddle.
I am using the classes .js and .no-js on the <html> element to differentiate between layouts that have Javascript and those that don't.
With the <html> element, I added a default class of 'no-js'. Then I include a single line of script in the header, document.getElementsByTagName("html")[0].setAttribute("class","js"); to switch the html class to 'js'. Obviously this line of code will only work for browsers that have js enabled, so the <html> element will become <html class="js"> whereas non-js enabled browsers will continue to read <html class="no-js">.
And then I will simply use .js someElement{ font-weight:bold;} versus .no-js someElement{ font-weight:normal;} to style my page differently.
However, I find that this approach fails dramatically on IE7. On IE7, the script works - or so it seems. On Developer Tools, it shows <html class="js">. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the <html> element has a class of .no-js. (Check out http://bit.ly/LMre3N to get a clearer picture.)
I can't begin to imagine what exactly is wrong here: is this a case of IE7 behaving wrongly when rendering CSS, or is it a case of scripting not working properly? Here's what I tried:
CSS
Changing the order of .js and .no-js declarations, as I figured it could be the latter overriding the former that's causing the problem - NOPE.
Changing the order of the script and stylesheets, since it might be because IE7 read the .no-js stylesheet before it read the script - NOPE.
Changing the specificity of the declarations - perhaps being more specific will lead IE7 to read the .js declarations - NOPE.
Removing the .no-js class from the document altogether, hoping that IE7 will thus read .js declarations. NOPE - it simply ignores both the .no-js and the .js declarations.
In short, IE7 totally and completely ignore the fact that there is a .js declaration. So I figured it might be the script that had problems, and here's what I did:
Javascript
I added 'type="text-javascript"' to <script> - No effect.
I tried document.documentElement instead of document.getElementsByTagName('html')[0] - still the same.
I used var htmlOrWhat=document.getElementsByTagName("html")[0];
alert(htmlOrWhat);, FF, Chrome, Opera, Safari, IE8, and IE9 returns '[object HTMLHtmlElement]', whereas IE7 returns [object], leading me to think IE7 is not reading the <html> element properly.
I then tried to read the id and lang attributes of <html> to test if IE7 is actually reading the element properly and yes, it retrieves these attributes correctly, it just simply refuse to apply .js css declarations to it.
By now, I'm at my wits' end (though I suspect the [object] anomaly is related to my problem), and I hope someone here at Stackoverflow will be able to help me out. I will really appreciate it if someone can point out exactly what's wrong with IE7 here, and how to fix it. Thanks in advance.
setAttribute() and getAttribute() are generally broken in IE7 and earlier (and compatibility modes in later versions). Use the element's className property instead.
document.getElementsByTagName("html")[0].className = "js";
Here's a fiddle demo - http://jsfiddle.net/ajcw/6Yz8x/1/
SetAttribute() doesn't work as you might expect in IE7. It won't set an attribute on an item after it has been created. You'll need another way to handle the change in IE7.
The answer below suggests using the className property. Or you could probably just use jQuery.
(More: IE7 and setAttribute() to remove classes)
setAttribute() and getAttribute() are broken in IE 7
check this out:
IE7 and setAttribute() to remove classes
So, Internet Explorer <= 8 does not accept the standard table-row and table-row-group values for the CSS display property (amongst others). I'm reticent to use JQuery's browser detection features as these have been deprecated. How can I detect table-row-group support in JQuery without parsing the browser/user-agent string? That is, how do I detect the presence of the feature rather than the presence of a specific browser?
I don't believe that with Javascript you can directly detect support for a CSS property. I have two recommendations if that's true:
Insert into a hidden div two elements, one with table-row and one without. See if there's a height or width difference. If so, calculate the height or width, having figured out the difference between a browser that supports it and one that doesn't.
Even though jQuery's browser detection is deprecated, you can host the following script locally:
http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx
I use it and I love it! It adds two classes (e.g., ".browserIE7 and .browserIE") to the body tag, so that you can use Javascript (if $('body').hasClass('browserIE7')...) or CSS (.browserIE7.div {...)
Good luck!
Edit
Maybe it is possible with Javascript...3rd option: http://perfectionkills.com/feature-testing-css-properties/ although I haven't read the article or used his suggestion.
If CSS property detection doesn't work out I'd recommend using IE conditionals like this:
<!--[if lte IE 7]>
<script type="text/javascript">
var ie7 = true;
</script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
var ie6 = true;
</script>
<![endif]-->
Or something along those lines...that's if you want to allow your scripts to determine which browser your using and don't want to parse the user agent string.
If you just want to direct CSS to specific browsers then obviously just put a link to an IE stylesheet in the conditionals. I would never recommend sending different CSS based on JS browser detection as not all users will have JS enabled.
You might find Modernizr useful. It tests for a great variety of CSS properties, and according to these tests, adds classes to the <html> tag. Also, it adds classes relative to the user agent and that stuff.
You canr ead more about Modernizr on its site: http://www.modernizr.com/
I have a written a jquery plug-in which pops-up a div section on hover over an element, and I need to deal with the "select z-index" bug in IE6 (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx). So, if running in IE6, my code needs to hide some select boxes on the page, when the pop-up div is visible.
My question is: In trying to follow best practices, I would like to avoid detecting the actual browser version and instead do a 'feature-test", to determine whether I am in an affected browser. (http://ejohn.org/blog/future-proofing-javascript-libraries). Is there any way to do this? Or should I just treat this as a special case, detect the browser and handle IE6?
I use this snippet all the time. It's cool because it checks only for IE6. But be aware that if you using any code compression tools that removes HTML comments this won't work.
<!-- THESE LINES ARE NOT NORMAL HTML COMMENTS! They are instructions that only IE6 can understand. -->
<!--[if IE 6]>
<script type="text/javascript">
// redirect to the Default error page passing a custom error code.
window.location = '/your/redirect/page';
</script>
Cheers.
Use the bgiframe plugin to fix the bug without having to hide the select boxes on the page.