Is there any possibility of rendering differences betweeen firefox 3 and 3.5 and IE 7 and 8, even if we are not using any new css 3 property/selector? - html

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.

Related

Select html field is different on IE 11

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)

ie 9 browser compatibility

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.

Test browsers compatibility with my website

Recently users of my website complained about the lack of support to IE6\7.
Is there an offline tool to test if a page-HTML isn't compatible with a specif browser and where is the problem?
Where can I find a list of things I need to be aware of in order to support IE6?
Update: The problems the users describe are in the UI, <Div>are not in the right places and that kind of problems, not JavaScript issues.
I can't force the users to upgrade theirs browsers.
IE6 is an ancient browser. Tell people who complain about lack of support that it's no longer supported and they should upgrade.
There is no "syntax checking" tool to find all incompatibilities, because the problems are not in syntax but how it's interpreted. There is no way around visual testing I'm afraid.
Here are some interesting SO questions on the topic:
One fix for all IE6 problems
How are programmers tackling ie6 bugs these days?
Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine
IE tester is useful for testing across version of internet explorer. It may not tell you what is wrong but you will at least be able to see / verify what users are reporting.
http://www.my-debugbar.com/wiki/IETester/HomePage
I have some offer about this for you :
Try to use Jquery more,because Jquery is compatible with most browsers
there are 3 useful addons for Mozilla : Firebug , Web Developer , IE tab
IE 9 has a developer windows that you can change your page standard into IE 8 or 7
Use syntax liek this :
<link rel="stylesheet" type="text/css" href="Styles/ie-fix.css" />
maybe this is useful dude for you :)
If your users are complaining about IE6, you should give support to IE, thats theory. BUT, if possible do as google has been doing for years, if the user is using IE6/7 or lower show some links to download newer browsers and tell them that their browser is too old.
You can use a seperate stylesheet for IE.
There is a third party software named Utilu. Utilu IE Collection contains multiple standalone versions of the browser Internet Explorer, which can be used at the same time. It has more than 10 versions of IE. But its used for viewing the web pages. This software also has firefox and chrome collections.

About Internet Explorer 9 document and browser mode

Good day! I have got a question about the Internet Explorer 9. Can anyone tell me if its document and browser mode (I mean rendering as Internet Explorer 8 and 7 when chosen) is appropriate to test HTML and CSS in different versions of the browser?
I used to use something like Multiple IE on my virtual Windows machine, but my colleague use the Internet Explorer 9 to test HTML and CSS "directly". So none of us has a sense of correctness of the chosen solution.
So, that's the question.
In my subjective experience, IE9's 8/7 "Browser Modes" have always been an accurate reflection of the actual browsers - at least for pure HTML/CSS.
However, there are subtle differences when it comes to JavaScript, see the "Differences between IE8 Compatibility View and IE7" section here:
http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
I usually test with IE9's older "Browser Modes", but if I'm feeling paranoid or I want to be absolutely sure, I use my virtual machines.
IMHO the answer to your question is yes - go with the browser modes.
Here is a good article for you
http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Few differences that I have seen in IE9 Doc Mode vs real IE8 or IE7:
1) If a PNG image is given opacity (via Proprietary CSS filter), 'Real IE8/IE7' shows black linings.
2) JavaScript performance in 'Real IE8/IE7' is obviously not as fast as IE9.
3) Fonts also tend to have some display issue in various modes: http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/ and font smoothing is an issue in windows XP.
4) Embedded YouTube videos have z-index issues overlapping other elements (fixed by wmode).
5) Proprietary CSS filters work properly in 'Real IE8' but are not shown if applied to an HTML5 element in IE9 doc mode. (Faced this once)
Summary: If the site you are making is JavaScript intense or the client is very much concerned about users on IE7/8, have a check on Real IE 7/8 and get the issues ironed out.

Messed layout only in IE 7

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.