Cross-browser rendering simply means how a page renders in different browsers. Generally, you want a Web page to render identically in all modern browsers. Sometimes getting an absolutely identical rendering requires more work than it’s worth, so what you should really concentrate on is getting an acceptable rendering across all common browsers.
Methods that you might use to obtain an absolutely identical rendering might cause problems when any of the browsers that are involved are updated or change versions, and you would need to repair whatever you did to obtain the identical rendering.
The solution is to make sure that your pages are valid and accessible, and that they render well across major browsers. This approach will stand the test of time.
Troubleshooting
In order to test your pages in browsers other than Internet Explorer, you must have the other browsers installed on your computer. For most testing, you can use Internet Explorer and Mozilla Firefox. Occasionally, you will want to also test in the Opera browser. Generally, if a page looks good in Internet Explorer and Firefox, it will look acceptable with most other browsers.
Download at least one of the following browsers:
Firefox: www.mozilla.com/firefox/
Opera: www.opera.com/download/
When you install a new browser, be sure to choose custom installation where offered. Ensure that the new browser does not become your default browser, and that you don’t make any system changes unless that’s what you truly want!
In this exercise, you will view a Web site in multiple browsers and address cross-browser inconsistencies.
Note
USE the CH3 site. This practice site is located in the DocumentsMicrosoft PressExpression Web SBSSample Sites folder.
BE SURE TO download and install the alternative browsers as described in the preceding Troubleshooting paragraph before starting this exercise.
OPEN the CH3 site and display the default.htm page.
On the File menu, click Preview in Browser, and then click Edit Browser List. Make sure that your newly loaded browsers are displayed in the list, and select their check boxes to make them available on the Preview list.
Troubleshooting
If an installed browser is not displayed in the browser list, click Add. In the Add Browser dialog box, click Browse, browse to the Program Files folder to locate the browser you’re looking for, and select it. Repeat the process for additional browsers as needed. When the browser list is as you want it, close all running instances of Expression Web, and then restart Expression Web.
On the File menu, click Preview in Multiple Browsers.
The default.htm page opens in all of the browsers you added in step 1. Compare the preview of the page in each of the browsers that opened. Make sure to point to links and navigate through the pages in each browser.
If you see an unacceptable inconsistency, you need to find that area in your page by using Design view and Split view, and use deductive reasoning to solve the problem. For example, if the problem is a deficient or excess application of padding on a certain element, then you’ll probably need to find that element’s style in the style sheet and remove or increase padding.
In Expression Web, with default.htm open for editing, on the Tools menu, click Compatibility Reports.
The Compatibility Checker dialog box opens.
Select the option for All pages, Open page(s), Selected pages, or Current page. Select which browser you want the HTML/XHTML compatibility checked with, and which version of cascading style sheets you want the compatibility checked with, and then click Check.
The Compatibility Checker checks the code of the page and displays a report in the lower portion of your workspace. The checker defaults to checking against Microsoft Internet Explorer 6. Using the Compatibility Checker is a good way to check for flaws that cause rendering problems in any browser.
Note
CLOSE the CH3 site and the open browser windows. If you are not continuing directly to the next chapter, exit Expression Web.
Note
You can generate a report from the Compatibility task pane. Click Generate HTML Report in the Compatibility task pane, and Expression Web generates a new page and reports the errors. This report is a valuable tool when you’re redesigning or analyzing a site. You can save or print this report for your own records or for your customer.
