I tried to open the AngularUI website (http://angular-ui.github.io/) in IE8. UI was not rendered properly in IE8(working fine in latest version of chrome/firefox). This led me to search browser compatability of AngularUI modules.
A discussion in the groups pointed me that AngularUI-bootstrap module does not support IE8( https://groups.google.com/forum/#!topic/angular-ui/8L0739rxdes)
But could find the info for other modules listed below.
UI-Utils
UI-Modules
NG-Grid
UI-Router
So the question is, Are these modules compatible with ie8. If yes, is there a desire to continue support in the future.
Many of the AngularUI directives do work correctly in IE8 provided you don't configure them using the custom element option. The problem is that IE8 ignores any elements that aren't standard HTML, which obviously blows that approach out of the water.
Use attribute approach instead. For example, instead of:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}"></tab>
</tabset>
Use:
<ul tabset>
<li tab ng-repeat="tab in tabs" heading="{{tab.name}}"></li>
</ul>
Alternatively you can tell IE8 to use elements which are not known per default by using a script like this:
<script>
document.createElement("tabset");
document.createElement("tab");
document.createElement("tab-heading");
</script>
This lets IE8 know that <tabset>, <tab> and <tab-heading> are valid elements.
In addition to #Paul's correct answer, which by the way should be marked as the answer, here is the Angular teams explanations and how to correct them to work in IE8 Angular IE8 development guide. Also, it should be noted that the Angular team is officially dropping support for IE8 in Angular 1.3 and later, blog. So, if you need to support IE8, don't use Angular 1.3+, nor use any angular UI that uses 1.3+.
Related
I wanna use the www.modernizr.com project for my site and run into a little question.
A comment in the very beginning of the modernizr.js tells me:
Modernizr tests which native CSS3 and HTML5 features are available in
the current UA and makes the results available to you in two ways:
as properties on a global Modernizr object, and as classes on the
html element. This information allows you to progressively enhance
your pages with a granular level of control over the experience.
So what means "as classes on the html element" ?
I tested it and just use the header element (which is HTML5) in my document and manipulate it via css.
After that i opened it with IE6 and ......YEA it shows correct!
So:
I thought header is and "element" of html not a class of html!? So is this comment in the modenizr.js correct?
Hope you understand my little (or maybe hard to understand) question :)
Regards
What modernizr does is, depending on what your browser support, add classes to the <html> element to let you know (mostly via CSS or even JS) what exactly seems to work properly.
That means, that if my browser doesn't support javascript, I'll get something like this if I inspect the DOM (using, for example, Chrome's profiler)
<html class="no-js ...">...</html>
Hope this helps.
I just completed a site: http://www.justcelebrations.co.in . I haven't launched it yet because of certain problems. The site uses css3 text gradients to style text in span and border radius to style most divs. It has to be made dynamic later so I don't want to change the text effects to images or something. The problem I am facing is that the site hangs IE8. I haven't tested it in lower versions of IE. I have tested the markup thoroughly and its validated and the css too is valid except for features which are from css3 like opacity, border-radius etc. I have also added google script to make ie behave properly and mordenizer library. The site still hangs IE8. Please Help me out here..
EDIT: after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9]
and it worked!
after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!
Can you add <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> to target fixes. As you make changes view in IE8 through IE9(F12) and play with -ie-(compared to -moz- & -o-) in your css. I would also keep a CSS 2.1 file and a CSS3 file to keep track of your new code.
It's working good here in Safari. Just to narrow this down, what if you remove all the conditional and IE specific libraries you got from Google? In my experience, all the various JS libraries that are supposed to make older IE versions behave always seem to break or conflict with some other script or library like jQuery.
Also see the answer in this thread for optimizing your page loading by placing the JavaScripts at the end of the <body> section. Perhaps in your case, loading the JS last will make some kind of difference to Explorer.
I'm running Selenium in singleWindow mode and IE8.
If i start IE8 manually the IE8 mode is set, but when i launch it with Selenium, the mode set is IE7 using the compatibility mode.
Anyone knows why the compatibility mode is not the IE8 view when launching the browser with Selenium?
Or, how can i disable totally the compatibility mode in IE and force it to use always the IE8 view?
I've given the question a +1 because it's a very good question -- it's not obvious how to do this, and if you need to test both modes, then it is a necessary thing to do.
You could get the site to serve <meta http-equiv="X-UA-Compatible" content="IE=7" /> within the page when running the tests. This should force the output mode.
Obviously, that's not ideal, because it means changing your code to produce the meta tag on demand. I'd normally consider it a bad thing if you're having to change the main codebase in to add code for the specific use of your test suite, but in this case I can't see any other solution.
Given that we've decided to go down this path, you could write your code to accept a specified argument in the URL that triggers the meta tag to be served. The IE7 tests could then be written to send that URL argument.
By the way, it's worth pointing out that IE8's IE7-compatibility mode is not 100% identical to IE7; it has its own quirks and bugs which are distinct from those of a real IE7 browser. For the most part it should be fine, but it's worth being aware of this if you're expecting your tests to confirm that the site works in IE7. See this blog post for more info
I have some workarond solution for this, I use it regularly:
In internet explorer goto:
1. Tools / Compatibility view settings.
2. At the Add website input textbox add your website url.
Hope that helps, best regards,
Peter Nadasi (HUN)
I know there is the conditional comments:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
<![endif]-->
to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?
If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.
However, I would agree with the comment by #Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.
All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.
If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.
There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)
You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.
There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.
$(document).ready(function() {
if ($.browser.mozilla && $.browser.version == '2.0') {
$('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
}
});
I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)
Firefox has native support for SVG. However, I have a web page where the SVG graphig is <embed>ed, and a plugin is requested to show it.
When I click on the plugin icon, no plugin is proposed by FF.
Questions:
Is there such a plugin?
Is there a way to make FF display embedded SVGs using its native support without installing a plugin?
The same happens with TIFF files.
UPDATE:
Code:
<td align="left">
<p>
<embed
src="/file-server/review/AttachedFilesServlet.servlet?attachedFileId=28604|original=additional-docs/medicine.svg"
alt="SVG"> Image SVG
</p>
</td>
I've had a few issues with this recently. The way that I managed to make it work was using the embed function (I was initially using html5, which firefox 3.6 doesnt support inline svg, yet)
The syntax used was, where workspace contains just SVG code:
<embed src="workspace.svg" width="500" height="500" />
The above code shouldn't need a plugin, and didn't when I used it. The advantage of using <embed> rather than <object> is because it allows you to run scripts. If your syntax is slightly different then that could be your issue. If your syntax is the same, post your code as a whole so we can have a look.
Adobe used to supply a plugin but they no longer give support for it so it is wise not to use it.
Edit in response to code posting by OP:
There are only two reasons I can think of, as to why your code isnt working, but not sure if they would actually make a difference:
a) Closing the embed tag (almost definetly not the problem, but is good practice to do so anyway).
b) As I cant see your servlet I cant assume that you have not set the content type to be image/svg+. That could be an issue.
res.setContentType("image/svg+xml");