I noticed that in IE 11, select fields (dropdowns) have a diffent appearance (and the other form fields looks different as well). It looks flat on IE 11 while on other browsers (even lower IE browsers), it is not.
Is this an effect of Window's Metro UI which is only available on Windows 8? If it is then why am I experiencing it on Windows 7?
Is there a way to force form fields to use older ui? I've used <meta http-equiv="x-ua-compatible" content="IE=9" > but it does not work.
Please refer to this link for a live sample. Use IE 11 please.
http://jsfiddle.net/u8xtumya/
Yes, this is the way select are being styled by IE11. This might or might not be directly related to the Metro UI, but that doesn't matter.
Setting an older compatibility mode will not affect the looks of elements. It will make sure you miss out on functionality that has been added to IE11 that was not present in older versions. It's a bad idea to use anything but the latest compatibility mode if there's not a very good reason to do so (like your web app is old and doesn't run in the latest version).
You can use CSS to style the select (and the ::-ms-expand pseudo-class to style the arrow that expands the menu)
Related
Iam displaying a form inside the bootstrap modal dialog. But, the elements disappears/flickers when scrolling the form keeping keypad open in windows phone 8. This issue is not observed in any other browsers. e.g. firefox, iOS, mac etc... It would be great if someone helps me to fix this...
Some time cross browsers effects some tags and scripts, may be you are using a kind of browser where html5 is not supported for html5 support even in IE you can use HTML5.JS here is the LINK For reference see this Link
I installed ie 9 and tried to bring up my application. I could see that the css is applied properly and the page renders well. When a colleague of mine did the samething he didnt get the page correctly. All the paragraphs were looking disaligned and extra spaces and lot more issues.
On checking the browser mode and document mode of my machine by pressing F12 it was IE9 compatibility view and IE7 standards respectively. For my colleague it was IE9 for both the modes.
Questions:
1) Why is the setting different in each installation of IE9 in different machines ?
2) How to control the setting to make it uniform in all the machines ?
1) IE settings are depend on your installation and older version of IE. It's always different in each machine.
2) Just put following code in your header and your IE browser would open by default in defined compatible view.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
You can change "IE=EmulateIE9" to "IE=EmulateIE9" if you want make IE8 as default compatibility view.
I have a page and the width of a field displays find across all browsers and OS combos but in IE10 Metro the content drops down to the next line because the field isn't wide enough apparently.
I don't want to extend the width of the field any more as I have already had to do that for Firefox on OSx and other IE variants; so didn't want to make it any wider across the board.
Is there a way I can target IE10 Metro with conditional tags or other - like other IE's?
You will not be able to detect IE10 Metro since IE 10 has dropped conditional comments. Source: http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/
One solution maybe to use Javascript feature detection in order to determine the browser.
I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.
I'm making a site for European client and he said Firefox 3 and IE 7 and 8 has more user than others browser for desktop in Europe http://gs.statcounter.com/#browser_version-eu-monthly-200812-201001-bar
I've only IE 7 and Firefox 3.5.7 installed in my PC.
Should I download portable Firefox 3.0 and test in it too even if I'm not using any new css property/selector which only has support in Firefox 3.5 or testing in 3.5.7 would be enough?
And for IE testing in IE 7 would be enough or should i check my site in IE8 (downloading VPC image of IE8 and testing in VM) even if I'm not using any new css property/selector which only has support in IE8?
Or is it necessary to use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> in <head> ?
But what will happen when user will switch compatibility mode to IE 8 default rendering mode?
Can we make site compatible in IE 7 and 8 both without using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />? If yes, then what special we need to do.care/consider in css to make site identical in both?
It's worth testing the site in all browser to ensure that it is working correctly. Another way to test is to use the browser sandbox here: http://spoon.net/browsers/
IE8 is alot more standards compliant then previous versions of IE so if you are designing for FF 3.5 then you shouldn't have too many problems with IE8. It's worth using conditional comments as Dough mentioned to target IE7 or IE6 - http://www.quirksmode.org/css/condcom.html
Consider using this website checklist - http://www.xs4all.nl/~sbpoley/webmatters/checklist.html as once you have validated your html and css and gone through most of the other points then you will be well on your way to having the site display properly across all browsers
You don't necessarily need to download all the copies, but yes, there is a larger possibility of a difference between IE7 and IE8, though they should be minimized if not eliminated by your meta tag. I highly recommend you don't use that meta tag and just check for differences that might be able to be easily fixed. Since IE8 has come out, I have never had to use the meta tag to fix any problems or differences. I still use IE conditional comments to add rules for fixing differences in IE6 + IE7.
There is much less of a concern between Firefox 3 and 3.5 if you are not using CSS3 or -moz specific selectors.
Either download IETester (IE only) or used Adobe Browser Labs (both) to check IE8 and Firefox 3 as a precaution before launch.
I do dev testing using IEtester, been using it for about a year and it's been 100% correct in rendering CSS when compared to the stand alone versions of IE6,7,8. It's also very good for tweaking CSS and quickly seeing the impact.
From a general perspective I normally have alot more issues between IE6 and other browsers, while IE7 and IE8 are very similar in most regards.