We Keep Coding

How to debug web page rendering compatibility issues across browsers?

I am developing a web page primarily using Firefox. Often I encounter that my web page renders properly in Firefox but has some unexpected behavior in Chrome and IE.
Generally if its related to javascript, I usually open Developer Console in Chrome and see if there were any errors and that gives me a clue as to what might be wrong.
Unfortunately, I am generally lost if its a CSS related or HTML element issue.
In one particular case, I have placed a div inside a <td> and I am lost as to why the chrome cannot render it properly irrespective of the fact that firefox is happy and does not complain.
So my question is, how to debug issues related to rendering of HTML pages in Chrome and CSS and determine what might be offending.
My related question is, is there a guidelines to make my web page work in almost all the popular browsers with little effort? I am particularly thinking in terms of tool or process which will warn me of compatibility issues with my web page.

IE (Internet Explorer) and little effort doesn't match to each other, you have to invest more of your time and effort only for IE, illuminate IE and be happy, as a suggestion, use Twitter Bootstrap if possible, it's a ready and tested css framework (maybe framework is not perfect name).
Basically, as far as I know, only a css reset could be used to gain some consistency but still you have to test over different browsers because each has different rendering engine. If you want to keep IE in the list then test the layout for IE at first.
Only for the IE or Inconsistent Exposer (IMO) there is a developer tool available (IE Tester) to test layout (HTML/CSS) over different versions of IE and only works on Windows so it may help you a bit if you are Windows user. There is also an online tester available and sometimes helpful, it's browsershots.org.
Also IE has a debugger/developer tool and pressing F12 will bring it so you may see something like this:
Google Chrome has it's built in debugger/inspector (CTRL + SHIFT + I) and on Firefox you may use Firebug extension and these browsers are not dumb like IE and there are lots of debugging extensions available for these browsers for free, not worried about these good guys.
Generally speaking, IE users are dumb and used to see dumb things on their screen so I don't think too much about them because they really don't know the difference but as a developer you may need to think about it and in this case I would demand extra charge from my clients if they want me to make a site compatible for IE < 10 because it requires extra effort.
You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!

I am not aware of any tool that will warn you because there is no way for a tool to validate the result of what you desire.
As far as how to test HTML/CSS. Chrome supports the most HTML-5 and FF is a close second. If you develop in chrome it normally works in FF and via verse. IE is where the pain is. IE does not support all HTML tags and often will render things wonky. I normally create my webpage and focus on FF and chrome once I like the results I open IE and debug. 98% of the time it is CSS changes that need to be made. I debug CSS first and if I am not able to resolve it with CSS after a decent amount of work I will look into changing the HTML. I try to avoid changing HTML because you have to debug all other browsers again.

Styles and code developed in Chrome will generally work in Safari, Opera(same engine), and IE 10+ with few inconsistencies. You'll get a few rare positioning issues with some CSS3 specs in Firefox, specifically in background positioning. You'll also find some javascript issues unique to Firefox.
IE9 is generally a good sport and usually doesn't have too many issues. IE8 will have a few and they'll be significantly different based on the OS (as there are multiple versions of each IE and they all support different specs for Javascript and HTML) specifically you'll find lots of issues with XP IE8 and really shouldn't support it (Microsoft doesn't even want to).
For the most part you'll be developing to IE inconsistencies unless it's a CSS3 spec with the occasional javascript strangeness (which js frameworks generally can help with since a few of them were made with that goal in mind).
As far as tools, browserstack is nice but doesn't give you a lot of time. If what you're trying to use is modern caniuse is a good place to visit first. Almost all issues between non-IE browsers will be HTML5 or CSS3 specific though.

Can IE 9 still sign with Javascript like in old IE and Netscape / Firefox?

It was possible to sign with digital certificate in IE and Netscape
http://bozhobg.wordpress.com/2009/04/16/how-to-create-a-digital-signing-solution-with-only-javascript/
What's the equivalent in IE 9 ?

You're going to have a problem with this.
The clue is in the code in the link you provided. Specifically, where it uses new ActiveXObject().
ActiveX is a very old technology and it has severe security issues. For this reason, it's use has been discouraged for some time (this was the case a long time before the article you linked to was written).
IE9 does still support it, but only for legacy reasons; its use is strongly discouraged, and you will need to go to the browser config and disable some security settings in order to get it working.
If you do get activeX working in IE9, you'll also need to make sure you have the relevant activeX controls installed on your PC that actually do the work (I've not used the ones in question, so I can't advise on them). In addition, since the activeX technology is deprecated, you may find that the activeX control you need to use may not have been kept up-to-date. This may affect whether it works with newer versions of IE or Windows.

Cons of using Internet Explorer's Compatibility Mode

What are cons of force a web site viewed in IE to compatible mode? Say we force IE9 to IE8 compatiblity mode?
Performance drawbacks
Can't use any new IE9 specific features like HTML5/CSS3/SVG
Why?
We run legacy web app which is developed since 2000 so it's a mess ball fighting to be compatible with Chrome, Opera, Firefox, IE6/7/8 and now we decide to add IE9 to the list. But with IE9 we run in issues with printing, "Permission deniend" JavaScript errors (probably something about cross-frame JavaScript calls) and next issues - the easy workaround is to force IE9 to behave as a IE8 and then everything works fine. But I am still not sure if it's way to go...

first our app is public site (for our clients)
You have a public website developed in 2000 and it doesn't work on modern browsers? Deprecate it or re-write it.
Don't hack your code to support modern browsers, the website is clearly poorly written and doesn't apply to standards. You can't get away with this.
The only place where you can get away with this level of incompatibility is intranet applications and even then you should simply state "it works on browser X, live with it"
You can't say that to public facing clients. I mean you can try, but have fun losing business to your competitors.
Re-develop your website to match the W3C HTML/CSS standards and the ES5 standards and it will be completely future facing (for some years).
Alas, the way the web works is that anything more then 5 years old is deprecated. So either re-write it every 5 years or get out of the web business.
In terms of actually using compatibility mode, don't. IE6-8 are horrible engines and should be avoided like the plague. If you use them then you can't write future facing standards compliant code.
Your code needs to match the standards and you should fix / shim / patch any browser specific bugs where those browsers don't implement the standards.

You cannot say you have tested in IE6/7/8/9 until you have tested in those different versions. Emulating the test environment is not the same as using the test environment. To my knowledge IE7/8 compatibility modes are the older render engines, not the underlying browser as a whole, bugs and all. It is closed source so you will never know.
Convert Microsoft's free to download virtual disk images for cross-browser testing to Virtualbox images and put them on a machine that just runs Virtualbox. An old machine will do, run the VMs headless and access them with remote desktop. In that way you will be able to test in all browsers without burdening your machine with MS/Spyware.

I believe your system admins can set IE to compatibility mode for all intranet traffic using the Group Policy Editor. Any site you create will from this point forward, you can add a meta tag to force IE9 to render natively and use all the newer features...
I'm having to do that on my current project using the following doctype and meta tag in my header:
<!DOCTYPE HTML >
<meta http-equiv="X-UA-Compatible" content="IE=100" />

Compatability mode is something that MS introduced to give people some chance to upgrade their applications, not for long term use. AFAIU.
If you want your application to be compatible with IE9, then you will have to change it. If you are trying to maintain IE6-9 compatibility then you have a real challenge, and you should consider whether this is really practical - in essence, you need at least 2 distinct sets of html. Is this practical for you?
IE9 compatibility mode is different form IE9 and IE8 - it draws bits from both. So you need to do a full test agaisnt the compatibility mode version, and ensure that it remains working against this.
So in answer to the question, the cons are that you are not being IE9 compatible, and there is a danger that when IE10 comes out, your code will not run against that in any mode. You are putting the effort into compatibilty testing without providing for future changes. You would do better, in the longer term, to make your code IE9 compatible. Also, the message you are giving your clients is that your code base is not going to be compatible for much longer. Unless you are talking to them about a re-work, this is a real negative.
However, it sounds like your entire code needs a re-work, to forget about IE6 and be written for modern working browsers. Using compatibility mode until that happens is probably OK. If you do this - and tell your clients - then staying in compatibility mode is viable.

Using compatibility mode will NOT cause the browser to use the JavaScript engine that was present in the old version of IE.
By that I mean it will run any JavaScript code using the IE9 engine. Which was a problem for us when debugging an old product that had a problem with IE7/8.

What are the chronological steps in building a cross browser compatible site? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 12 years ago.
Improve this question
I am working on my first project that requires me to worry about cross browser compatibility. Since this is my first time doing so, I dont know how to go about completing the project. I am specifically worried about IE. Should I complete my project in a more graceful browser then hack it to work in IE, or should I simultaneously build my program up in both environments?

Design your site to work in standards complaint browsers first. I always start with Firefox, even when developing on my company Intranet (where everyone uses IE). Doing so will let you focus on getting your markup and CSS correct. This is what is most important.
The important thing to note is that you'll want to "future proof" your site, and concentrating on a standards compliant browser will help you do that.
Then, once you're confident your site is looking correct (validators are your friend!), try it out in the versions of IE you want to support. In order to get your layout to look OK in IE, I strongly suggest using different stylesheets for each version of IE, using conditional comments.
Also, you should note that many others have been in the same scenario as yourself, and there is quite a bit of help available. One popular method of forcing IE to behave is the ie-7.js project.
Lastly, be mindful of the top IE bugs, such as:
IE6 Box Model Bug
IE6 transparent PNG images (I have used this fix in the past)

A few tips:
Code to Standards — Start by ensuring that what you've just developed works in Firefox and Chrome, and then verify it in IE. I'll usually then check it out in Safari. It's always better to make sure your markup/code works in a more standards compliant browser first.
Validate Early, Validate Often — You don't want your design to look perfect in one browser, find out that it's broken in another, discover that to fix the broken layout you needed to correct some invalid HTML/CSS, only to find that now the first browser looks wrong.
Progressive enhancement — will be your friend. Start basic, with simple HTML and simple CSS, and no JavaScript whatsoever. Repeat tips #1 and #2, then move on to more complex styles and layout. Contiue this iterative process until you are happy with the design in all browsers. Only then should you consider JavaScript to polish the site.
Check each browser often — Don't develop the entire website in a single, compliant browser like Firefox, and then decide to "see what's broken" in IE. If you've got a complex, dynamic website, there could be MANY problems in Internet Explorer. Trying to decipher each one when they are compounding on each other is a nightmare.
Reset Stylesheet — As #Eir mentioned in the comments, find a good reset stylesheet. Although, they have fallen out of favor for some people, I find putting every browser on the same footing from the start helps tremendously.
Use a Framework — I find CSS Frameworks to be excessive, but some people swear by them, so to each his own. On the other hand, as soon as you have made it to the JavaScript phase of development, I highly recommended using jQuery or MooTools. They are very focused on circumventing cross-browser inconsistencies.
Let JSLint hurt your feelings — Even when using a JavaScript framework, there are certain standards of coding to which JSLint will help you conform. Some of the options are a bit overly strict, but I promise that if you clean your scripts through this tool often enough during development, you will almost never encounter those strange times when everything seems to work in all browsers except IE.
And some great tools! Everything in the above list you should consider mandatory practice. The following can spice it up for you in a pinch, but is optional:
CSS Browser Selector — it is rare that you will need this, but if all else fails, it's way cooler than using a separate stylesheet just for one browser (I despise conditional comments). It basically adds classes to your <html> tag, so you can do things like the following in your main stylesheet: .ie7 #header {/*stylese here for IE7 only*/}. It supports a lot of browsers on many operating systems. And it's fast.
Browsershots — Nothing beats the real thing, but if you can't install a suite of browsers, this and other tools like it can help.
IE6 CSS Fixer — I outright refuse to debug my designs in IE6. I coerced my company (via many chagrin-filled meetings with IT and management) to drop support for it (thank god). It's just counter-productive to waste so much time forcing this pile-of-ahem... Anyway, if you aren't like me and need to support IE6, this tool can help.

Also you should focus on resetting css like this

OOoooo, good question:
here's my take:
Decide which browsers you are supporting. I suggest IE 7 + 8, FF, Chrome and Safari as in order of importance. (only support IE6 if you absolutely have to!). It helps if you know your userbase here.
Use a css reset. Different browsers have different default styles. a css reset gives you a consistent base.
Keep your markup as simple as possible. Follow Standards (and see progressive enhancement on Stephen's answer).
Test every step of the way on your target browsers. That way you can correct problems right away. http://crossbrowsertesting.com/ is the best resource for this, but there are free ones for screenshots as well.
Avoid Hacks as much as possible. Most cross-browser issues these days can be solved without resorting to hacks.
Ask questions here when you get stuck. If this is your first project dealing with browsers, you will get bewildered by inconsistencies. We all face these issues, and are glad to help.
Be ok with the fact that webpages are not going to look exactly the same in all browsers. (once again, see progressive enhancement).
Good luck coding!

I develop for Firefox first, and then work out the IE buggery. Rarely do I "hack" it, rather find something that works in both, or at worst use IE conditional comments. Just one coder's preference. Always a good idea to test with Safari, too.
Two big advantages of Firefox are: the Error Console, and the Firebug plugin.

there is alot of greate tools that makes life alot easier for you there is for example a
css framework called blueprint you could use, it has already everything set for every specific browser so that you get the same outcome in all browsers. And using jquery as your javascript framework does add an extra insurance that you'll have it working in most browser.
but remeber there is no such thing as 100% cross browser compatibility for all the browsers and all the versions in world.

In theory would be best to develop for all browsers at once, always testing for every browser...
Realistically, that rarely happens... I typically develop/test with firefox. when I introduce complex javascript or css, I check in ie... this tool is incredibly handy for checking all versions at once... google ie tester.
By checking all browsers at regular intervals, and when you make complex changes, you ensure that major features are compatable :)
Also, ensuring that all of your code is valid is not only good practice, but helps identify cross browser issues.. google w3schools validator :)
Using javascript libraries such as jquery also aid in cross browser compatability, and some even come with css libraries as well. These libraries are purpose built for quick, reliable features that are typically cross browser guaranteed.
Finally, before launching, use launchlist to check that all works: http://lite.launchlist.net/
Hope all that makes sense and helps with your first project :)

ASP.NET AJAX 3.5 and IE6?

I recently upgraded an ASP.NET app to .NET 3.5 and switched to the newer version of the ASP.NET AJAX library.
In FireFox and IE7, everything works great, in IE6, anything that would perform a callback (Partial Refresh, or calling a PageMethod/WebMethod) throws an error:
Object Doesn't support this property or method
Line: 5175
Char: 9
Is there a known compatibility issue with .NET 3.5 and IE6?
EDIT:
I attached a debugger to IE6 and was able to find the exact line it is breaking on:
this._xmlHttpRequest.open(verb, this._webRequest.getResolvedUrl(), true /*async*/);
It appears that IE6 is denying the permission to do "open". This is not a cross-site request, so I am puzzled. This site is currently running on a fake hostname mapped to a local server, and not on an actual domain, but I don't think that should make a difference.
EDIT: I added a bounty, this bug is still driving me nuts...HALP!
EDIT:
Solution found!
This forum post made me curious enough to search for MXSML, and sure enough, there it was, a typo in the framework library.
MsXML was typed as MXsml.
Of course, when dealing with assembly scripts, you can't do much to fix them, but I installed SP1 hoping that they were corrected there. They were...So, if you have this issue, install .NET 3.5 SP1 and it will go away.
Woo!

How are you testing in IE6? I have come across several javascript errors when you using anything but a clean install of only IE6 in conjunction with the asp.net ajax libraries. (ie. the asp.net ajax libraries don't support multiple installs of IE, or even IETester)
It is something in the IE security model that makes things go haywire when multiple version's of IE are used. You'll find that cookies won't work right either in anything but the "installed" version of IE on the system you are running.
You may also look here for some more information on multiple IE installs. If found the comments to be particularly helpful!
UPDATE
I was able to dig, this up in the asp.net fourms. That's the only other thing I could find. May not be too be too helpful, but it at least sounds about like what you are hitting.

According to MSDN IE6 is supported. Make sure that the Internet Zone in the Security Zones settings are set to Medium.

Another one from the asp.net forums
http://forums.asp.net/p/1376680/2896886.aspx
Could be caused by different versions of the XmlHttpRequest object