I would like to ask, why IE11 does not displays border-radius, justify-content and align-items in my project.
When I create new .html page these tags are supported. But not in my project. Can you please help me how to solve it? Mozilla Firefox display it right and the DOM explorer gives me no error messages.
Internet Explorer 10 and 11 use a squiggly red underline to indicate invalid rules.
Obviously, these are valid rules so referencing this article by John Schneider
When I looked at the CSS styles in use on the page in IE11’s built-in F12 developer tools, I noticed that the border-radius property on my form’s enclosing div was present, but it was missing its enable/disable checkbox, and the name of the style was shown with a red squiggle underline, as though IE didn’t recognize it. It seemed almost as though IE11 was behaving like a legacy browser that didn’t recognize that newer CSS property.
In fact, that did turn out to be exactly the problem. IE11 was rendering the form (running on my local IIS) with its legacy “Compatibility View” engine, which it is by default configured to do for intranet sites. (Oddly, my IE11 was not using Compatibility View to render another copy of the form that I was trying to use to debug the issue that I had IE loading via the “localhost” domain, which had me confused for a while.)
The solution was to disable IE11’s Compatibility View for intranet sites by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox. Making that configuration change immediately got IE11 to start rendering the page properly.
Your browser may be in compatibility mode to an older browser.
Press F12 - and check which version it's using.
Related
My client uses ie8 and the site I made for them works fine in all other browsers EXCEPT ie8. Most things are out of place and I can't figure out what styles are causing this to happen. I am now using ie conditional styling, but I don't know what to put in my stylesheet since I am not sure what attributes are not showing up.
Anyone know a software that compared your style css to what styles are actually being used?
Assuming that you're running the latest IE, run the developer tools (press F12 while viewing your webpage, or go to IE's Tools -> F12 Developer Tools menu), and select the Emulation tab, then change the document mode to IE8. You can then inspect the element that's causing the issue. Unfortunately you'll have to do trial by elimination in order to find out what styles are or aren't being used.
I know of no software that will automate this for you, but you can check for this yourself at 'http://caniuse.com/#cats=CSS'
This keeps very up-to-date data on browsers and their feature compatibility.
Have you tried pressing F12 to access developer tools? If you click on the DOM explorer tab, you can browse through the code.
Once you find the part of the code you are interested in, you can click on it and see the relevant css in the panel on the right.
I've posted a photo here: http://epic-xp.com/wp-content/uploads/2015/02/test.png
I have some static HTML pages for a mockup design. The HTML pages are working perfectly standalone in ie8, ie9, chrome, mozila and safari.
When I deploy them onto the server(WCS) for intranet development, it is not aligned properly only in IE8 but they display correctly in other browsers including ie9.
I have two questions:
I think I don't have CSS issues if I have that CSS issues it does not
work in the standalone pages also in ie8. Am I correct?
Do I need to give any X-UA-Compatible setting to IE=edge from
server side???
I would always choose a X-UA-Compatible value of IE=edge,chrome=1
This way you always get the latest rendering engine in IE and are future save, if you are wise.
If you see, that some things don't work in IE8 you should use modernizr and/or polyfills. You have to google these because I cannot describe them in detail here.
In your case thare will be many possible answers
Sometimes Browsers behave differently when displaying a local file (protocol file://) or a webserver document (protocol http://)
Do you have default setting of X-UA-Compatible as HTTP header on your webserver (inspect with Firefox Firebug, Net tab)
Is the Compatibility mode broken (See if you have a torn apart page symbol in your IE8/9 address field, see here: http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/features/compatibility-view)
Else you will have a CSS issue.
I'm working on a site for a client and they've asked for a fix for the font rendering in FF and Chrome not looking as good as it does in IE. Here's a screenshot:
Does the IE text on the left look nicer because it hooks into Windows Cleartype, and FF doesn't? I think there is nothing i can do about this, am I right?
I don't think there is anything to be done about this. While IE does use ClearType fonts by default (this can be turned off in Tools > Internet Options > Advanced (tab) > Multimedia (settings option) > "Always use ClearType for HTML" (checkbox) ), turning it off doesn't seem to change the fact that IE will render text slightly differently than FF, Chrome, Opera etc. Even if it did fix it, it's a client-side option so you'd still be out of luck.
So, yeah you're stuck with some difference in text rendering based on the browser.
HOWEVER, you can try google's web fonts:
http://www.google.com/webfonts#ChoosePlace:select
They seem to look very similar cross-browser, though I see a slight difference between IE8 and FF5.
Plus, they look pretty cool and you don't need to install them on your system to use them.
There is no way to activate this from your website. Window's ClearType can only be activated in other programs via Windows' settings. It's not a browser feature, it's an OS feature.
I created a quick and dirty HTML file to demonstrate an issue I am encountering in IE compatibility mode. When I open it in IE8 from my desktop, it opens in standard mode. I need to be able to switch it to compatibility mode, but the icon for that disappears when I am viewing a local HTML document. What's up with that?
UPDATE: None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
I'm not sure whether this'll work because of IE's many crazy exceptions and rules regarding local files and compatibility mode, but try the META tag approach.
In your <head>, for example say:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
See understanding compatibility modes to make sure you pick the right one.
You could try pressing F12 to open the developer toolbar, and change it in there.
Update: Have you tried tools > compatibility view settings > display all websites in compatibility view?
Users can override the ‘local
intranet’ setting by un-checking
‘Display intranet sites in
Compatibility View’ at Tools ->
Compatibility View Settings.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx
None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Debugging JavaScript in IE7
Firefox has Web Developer plugin and Firebug for troubleshooting html/css/javascript issues. Google Chrome and Safari have a very similar console and right-click options for "Inspect Element".
Does IE7 have anything similar for troubleshooting layout/html/css issues?
Yes - The Internet Explorer Developer Toolbar
Download details: Internet Explorer Developer Toolbar
You can also use Firebug Lite, wich works on IE, Opera and Safari.
It's a Javascript implementation that you can load with a simple bookmarklet.
As SO doesn't allow Javascript, here is the bookmarklet source code (just copy paste to your browser location bar (always make sure it's safe before executing random javascript (In any case check the first link)))
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Firebug Lite supports all basic commands of Firebug.
I have also used Debug Bar.
Check out the IE Developer toolboar.
Web Development Helper
Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window.
Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to be installed on the machine.
Once installed, the tool can be activated using the Tools | Web Development Helper command. You can also customize your browser's toolbar to add a button for this command to facilitate frequest use. Clicking on the menu command or browser button brings up the tool's console window and set of commands.
Page Features:
DOM inspector allows viewing all elements, selected elements, or elements matching an ID or CSS class, their attributes and styles.
Capturing a screen shot of the current page.
Viewing page information such as metadata, tags, and linked resources. .......
unfortunately it seems microsoft have discontinued it, the page for the toolbar now just says 'We are sorry, the page you requested cannot be found.'
I reckon because its built into 8 they have removed it for download, and cant be bothered with helping out us devs who are forced to make our projects work in their more archaic browsers :'(
Also before anyone says it, IE8 compatability mode != IE7
There's a toolbar you can get but it still doesn't match up to Firefox, especially for javascript debugging.
IE8 will be a huge improvement for development.
The following is specifically for IE7, other versions are probably similar.
Here is the new link to the developmment tools from microsoft.(as of 4-26-2011) IE Development Tools
Once installed, you will need to enable the toolbar.
To Enable, click on Tools | Manage Add-Ons | Enable or Disable Add-ons, to enable the addon.
To add the icon to the IE Toolbar, right click on the IE menu | Customize Command Bar | Add or Remove Commands. Add the "< (arrow) >" icon.
Hope that helps.
You can also use IE watch, which is like firebug, but you need to buy it. It is a 30 days trail version.
Actually, the best add-on for developers to IE would be Fiddler. It has a number of features that the other browsers possess.