How to find which section of a website is not compatible with new browsers?

Question

I have been tasked to fix a really old website (.net aspx vb). The website currently is not running well in IE8, Firefox, Chrome. The menus are displaying funny and some images are not correct, and in Chrome the complete header with menus and all is missing.

I am not a vb guy, and I have no idea where to start looking.

What will be the most common section that a website will start failing in new browsers? What tool can help me fix this website?

Thanks for your help.

Answer 1

JavaScript, HTML and CSS are what cause browser problems, not VB. The VB.NET code is all executed on the server and generates HTML as its output, which is sent to the browser to be rendered. If the site looks wrong, it is likely the HTML and CSS. If it behaves oddly (or not at all), the problem is likely JavaScript.

To be entirely honest, I have not yet come across a great single resource for learning how to "do" cross-browser development. It generally seems to be a matter of just learning HTML and CSS well, and finding out what does and doesn't work in various browsers by experience. Any time you run into an individual problem where a specific thing does not work as expected in a single browser, you can almost always Google it and find a blog post or site that addresses that specific issue, but nothing really broad.

Answer 2

VB isn't at fault here, as your problem lies somewhere in the markup and styles of the page.

You need to figure out what styles are causing the breakdown (it helps to make sure that the HTML is valid before). In IE 8 you can use its developer tools which can be accessed with F12, where you can play around and isolate possible culprits. The "Inspect element" context menu entry in Chrome would be the equivalent there. In Firefox you could use the DOM Inspector (which is included, if I remember correctly) or Firebug.

Answer 3

On load of your page check for errors. W3C is a good source to find the compatibility of every property/function that is creating an error (mostly in Javascript/CSS/HTML). And yeah you need to know the VB control flow in your project.

Answer 4

Does the existing code even include CSS (Cascading Style Sheets)? If you are talking pretty old, it might be using tables to layout the items.

That's the main issue I find in developing any html website -- getting the CSS down correctly.

Answer 5

1. Install firebug in firefox.
2. Load the site in firefox, fix any errors you're getting on firebug's console. Especially event handling is done completely different in IE compared to other browsers.
3. Run the site through a html validator. There are several validator extensions for firefox. A validating site is much less likely to break on other browsers.
4. Finally, fix visual inconsistencies in layout by inspecting incorrectly formatted elements with firebug's html panel and tweaking them.