back

Cross-browser testing with Adobe BrowserLab and Dreamweaver CS5

by Tommi West

Note: Availability of the Adobe BrowserLab online service ended on March 13, 2013. For more information, please visit the BrowserLab Team blog.

Adobe BrowserLab is an online service that is integrated with Adobe Creative Suite 5. It is free if you sign up online before April 30, 2011. You’ll get access to all the CS Live services, including Adobe CS Review, Acrobat.com, Adobe Story, and SiteCatalyst NetAverages. And you can use a single user ID and password to access all these free online tools.

In this article, you’ll learn how to use BrowserLab to check the display of web pages. You’ll learn how to log in and access it from any browser with an Internet connection, and how to use the features to ensure your page layout displays properly when rendered with different platforms and different browser versions. BrowserLab is a very helpful tool when you don’t have the machines and browsers to test every required configuration yourself.

To get started, visit the BrowserLab page and click the Try BrowserLab button. The Sign Up For CS Live Services wizard appears. Click Next.

On the next screen, either enter your existing Adobe ID (the same credentials you use to log in and interact with the Adobe.com site) or click the Create Adobe ID button. Enter your email address, name, and password to create a new account.

Enable the option to Stay signed in to keep your connection active while you are testing a site. After signing in, you are presented with the Welcome screen. To watch an animated tutorial that illustrates how to use the features included in BrowserLab, click Next.

At any time during the tutorial, you can click the Close button in the top left corner to return to the BrowserLab home page. If you want to see the tutorial later, choose the Tutorial option in the Help menu. You can also access the BrowserLab online help from the Help menu.

Defining browser sets to target when testing

From the home page, click the Browser Sets link. The first time you use BrowserLab, you’ll see the default browser set displayed. To create a new browser set and target the browsers that your site project is required to support, follow these steps:

  1. Click the Add New Browser Set button in the top left corner of the screen.
  2. Select the Edit button (pencil icon) to the right of the default name “Custom Set #1,” and rename it to match your project name (see Figure 1).

    Enter a descriptive name to define the new browser set.

    Figure 1. Enter a descriptive name to define the new browser set.

  3. In the Available Browsers pane, select the checkboxes of the operating system and browser configurations you want to include when you test the page.
  4. As you select browsers to include, they appear in the right Browser Order column. Once you’ve finished selecting browsers, you can drag and drop the browser names to reposition them. The screenshots will be rendered by the service in the order that the browsers are listed (see Figure 2).

    Place the browser names in the order you want them to render; the screenshots will be created starting with the first item in the list.

    Figure 2. Place the browser names in the order you want them to render; the screenshots will be created starting with the first item in the list.

  5. As you hover over each browser name in the Browser Order column, a red X icon appears to the right. Click the X to remove a browser that you’ve accidentally added to the set.

    After reordering the browsers in the list, there’s no need to save. When you are finished, simply navigate away from the Browser Sets page, and your settings will be retained.

Using the BrowserLab interface to preview pages

The BrowserLab service requires that your pages have been uploaded to a host server. After you’ve uploaded them (put the files using Dreamweaver), follow these steps to test the pages:

  1. Click the Test link at the top of the BrowserLab window.
  2. Enter the absolute path of the page URL in the address field.
  3. Press Enter (Windows) or Return (Mac) or click the Refresh button (the circling arrows icon) to the right of the field to begin the test.
  4. The screenshot of the page is displayed on the screen. The browser and platform used to render the screenshot are listed in the top right corner.
  5. To view two versions of screenshots side by side, use the View menu to select the 2-up view option. It enables you to do a split screen comparison of two rendered screenshots of the page (see Figure 3).

    Choose 2-up View from the View menu to do a split screen comparison.

    Figure 3. Choose 2-up view from the View menu to do a split screen comparison.

  6. To see the two screenshots overlaid on top of each other, choose the Onion Skin option in the View menu. The two screenshots are displayed on top of each other with semi-transparency. Drag the top opacity slider to the left or the right to increase the opacity of one of the screenshots. As shown in Figure 4, when the marker is in the center, both screenshots are set to 50% opacity.

    Use the Onion Skin View to see how two screenshots differ.

    Figure 4. Use the Onion Skin view to see how two screenshots differ.

Identifying and resolving issues with browser incompatibility

Using BrowserLab, you can compare the rendering of the page in different browser combinations and see how they display the layout. Since Internet Explorer 6.0 is the browser with the most incompatibilities, imagine that the requirements for a site project include support for the following browsers:

To get started, you’ll create a new browser set as described in the previous section that includes these target browsers.

The first issue occurs because the site’s header container (div.header) uses a min-height rule. The code looks like this:

.header {
	
   background-color: #000;
	
   background-image: url(images/header_bg.png);
	
   background-repeat: no-repeat;
	
   background-position: left top;
	
   min-height: 300px;
 
}

Using the browser menus on each side of the screen, the header appears the same when viewed in Firefox 3.0 for Windows and Firefox 2.0 for Mac OS X (see Figure 5).

Two different versions of Firefox are closely aligned.

Figure 5. Two different versions of Firefox are closely aligned.

However, when Internet Explorer 7.0 for Windows and Internet Explorer 6.0 for Windows are compared in Onion Skin view, the difference is quite dramatic (see Figure 6).

Two different versions of Internet Explorer display radically different layouts.

Figure 6. Two different versions of Internet Explorer display radically different layouts.

This visual discrepancy occurs because Internet Explorer 6.0 ignores the min-height rule; only the top portion of the header background image is displayed in version 6.0.

To resolve this issue, you can do one of two things:

After making this change, save the page and upload the edited file to the server. Click the Refresh button to refresh the screenshots. In Figure 7, the entire header background image is now displayed.

The updated code displays the full header background image in both versions of Internet Explorer.

Figure 7. The updated code displays the full header background image in both versions of Internet Explorer.

However, now there’s another issue to address with the image inserted in the header. By viewing each screenshot in 1-up view (or dragging the opacity slider all the way to the right side), it’s easy to see that the inserted image file in the div.header container is not displaying its transparent background in Internet Explorer 6.0. The title is surrounded with a light gray background. However, testing reveals that the image is transparent when viewed in the other target browsers.

This is a known issue with Internet Explorer 6.0; it does not support transparent backgrounds in PNG files with alpha transparency. These files are also known as PNG 24 when exporting web images from Adobe Fireworks and Photoshop software.

While it seems like a bad situation, there are many ways to resolve this issue:

Note: In the code above, the image dimensions must be the same. Also be sure not to add any space between the span tag and the beginning of the image tag.

After making this code change, save and put the index.html file again. Then return to BrowserLab and refresh the screenshots. The transparent background of the PNG 24 file is displayed, although the text looks slightly wider (see Figure 8).

The width of the image file appears slightly larger when comparing the PNG file that uses the AlphaImageLoader filter.

Figure 8. The width of the image file appears slightly larger when comparing the PNG file that uses the AlphaImageLoader filter.

Depending on your project, this difference may be acceptable. If not, try combining the transparent element with the background, inserting a PNG 8 with index transparency, or using a GIF file.

To learn more about using this code to display PNG 24 with alpha transparency in Internet Explorer 6.0, see the AlphaImageLoader filter article on Microsoft’s website.

Scrolling down the page, there’s one more issue to resolve in the page layout. The culprit is a div container with a rule that has both float and margin properties applied.

Here’s the code:

.content-box {
    
  width: 244px;
    
  float: right;
    
  margin-right: 40px;
	
  background-image: url(images/stargazers.jpg);
	
}

The div container is shifted in Internet Explorer 6.0 because the margin values are not calculated the way they are in other browsers. If you use the View menu to show the rulers while viewing the Onion Skin view, you can drag guides over both screenshots to see how the content of the div is offset (see Figure 9).

Drag guides from the rulers to manually measure the different margins.

Figure 9. Drag guides from the rulers to manually measure the different margins.

Using the Smart Align feature

You can use another helpful feature to line up specific page elements and numerically compare them. Use the View menu to select the 1-up or 2-up view, and then enable the Smart Align feature by clicking the Align On/Off toggle button next to the View menu. Drag the grid from the top left corner to the area of the page that you want to compare. In Figure 10, the grid is aligned with the top right corner of the div content.

Smart Align a region of the screenshot to compare rendering differences.

Figure 10. Smart Align a region of the screenshot to compare rendering differences.

After selecting the Smart Align All To This Region option, the alignment report is generated (see Figure 11).

A numeric and visual representation of the region in each target browser is displayed in the report.

Figure 11. A numeric and visual representation of the region in each target browser is displayed in the report.

The report indicates that the Internet Explorer 6.0 for Windows browser matches by 86%. The small thumbnail of the region shows that text, rather than the top right corner of the div content, is displayed in that location.

Luckily, this issue is easy to fix. Update the rule to add the last line (in bold):

.content-box {
    
  width: 244px;
    
  float: right;
    
  margin-right: 40px;
	
  background-image: url(images/stargazers.jpg);

  display: inline; 	
}

After adding one line of code and testing the page with BrowserLab again, the Smart Align report shows that the issue has been resolved.

To learn more about working with the Smart Align feature, read the section entitled Adjust screen shot alignment in the BrowserLab online help.

BrowserLab add-on for Firebug

If you use Firebug, be sure to download and install the BrowserLab for Firebug add-on to work within the Firefox browser. This tool makes it easy to locate elements and edit a live page with Firebug (another add-on for Firefox). When you have both add-ons installed, you can launch BrowserLab directly from Firebug and preview the temporary changes you’ve made to the code with multiple configurations.

To learn more about BrowserLab, sign up and try testing your own site projects. If you have questions, read the BrowserLab online help. And to get more information about known browser incompatibility issues, see the Adobe CSS Advisor.

In Dreamweaver CS5, you can use Live View and Inspect mode to identify CSS rules in your pages to troubleshoot display issues. In the Reference panel, choose the O’Reilly CSS Reference book and drill down to the specific property for detailed information. Also use the Browser Compatibility Check feature to check your code for known issues.

‹ Back


Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.