Let's say you've just upgraded a site from Drupal 6 to 7 or made some other upgrade, but the new version of the site doesn't look like the old. The HTML output is fundamentally the same, but the new version of the site looks funny. What do you do?

One solution is to load the old and new sites in Firebug, and then compare the computed style tabs, element by element.

If that doesn't work, here's a tip that will let you do a diff of the computed CSS styles for the two sites.

You'll need Firefox with either DOM Inspector or Firebug installed, and you'll need IE with the Developer Tools installed:

1. Open the before site in Firefox and then use DOM Inspector to winnow the DOM down to only the elements that look different. For instance, if everything on the after site looks the same as the before site except the left sidebar, use DOM Inspector to get rid of all the elements outside the left sidebar. (You can also use Firebug to do this).

2. Open the after site and remove the same elements.

3. If the difference between the sites went away, then you'll have to reload both pages and do steps 1 and 2 again. The goal is to remove as many elements as possible, but leaving the problem you're trying to solve in place.

4. In DOM Inspector, right click on the body element and choose 'Copy XML'. You can do the same for both sites and compare them, and that might show how to solve the issue. But, if it doesn't proceed to the next step.

5. Open the before site in IE, and open IE's Developer Tools. Click the Edit icon (in the upper left, below the tabs) and paste in the XML you copied in Step 4. When you click the Edit icon again, what you copied will replace the body of the page.

6. Open the after site in another IE window, and do the same as Step 5 with that site.

7. If the problem you're trying to fix went away, you'll have to go back to Step 1. But, if you still see the same problem, then continue to the next step.

8. In each IE Developer Tools window, click the Element Source with Style icon (next to the Edit icon). That shows the reduced DOM, with computed styles applied.

9. At this point, you just have to do a regular text diff of the output from Step 8. If there's too much unnecessary info, then go back to Step 1. You can do things like remove classes on the body or other elements, comments, etc. If you winnow the DOM done enough, it should be easy to spot what's causing the difference between the two sites.