Expression Web team blog

Why doesn't Expression Web SuperPreview work with Firefox 3.5.5 on Windows XP?

amoskwa — Wed, 18 Nov 2009 00:44:00 GMT

Unfortunately, this particular Firefox update included a change that broke the ability of 3^rd party applications, such as SuperPreview, to embed Firefox on Windows XP and Windows Server 2003.

Those affected by this issue will see the error text: "Attempted to read or write protected memory. This is often an indication that other memory is corrupt."

Until Firefox releases an updated version with the fix, the only solution is to roll back your version of Firefox to 3.5.4 or earlier. To do this you will have to:

Uninstall the 3.5.5 version of Firefox
Reinstall Firefox 3.5.4 from ftp://ftp.mozilla.org/pub/firefox/releases/3.5.4/win32/en-US/Firefox%20Setup%203.5.4.exe

Once you've reinstalled you will need to turn off auto-updates for Firefox to ensure it doesn't update back to 3.5.5. To disable the auto-update functionality in Firefox, follow these steps:

Disable your Internet connection so Firefox does not attempt to automatically update.
Start Firefox.
On the Tools menu, click Options.
Click Advanced.
Click the Update tab.
Disable auto-update.

Click to clear the Firefox check box OR
Click the radio button to “Ask me what I want to do” when updates to Firefox are found.

Click OK to apply the changes.
Re-enable your Internet connection and restart Firefox.

NOTE: The above is a temporary workaround as this will also stop you from picking up all further updates of Firefox.

The Firefox team is aware of the bug and has fixed it. However, an updated version of Firefox containing the fix is not yet available. We will update this blog when we have more information.

For those interested in the technical details:

Precise Firefox change that broke other applications:
https://bugzilla.mozilla.org/show_bug.cgi?id=521750

Bug logged that fixes the issue caused by the above:
https://bugzilla.mozilla.org/show_bug.cgi?id=526586

MSDN article including note on problems with this implementation in XP and 2003:
http://msdn.microsoft.com/en-us/library/9w1sdazb(VS.80).aspx

Alex Moskwa
Program Manager
Microsoft Expression Web

Moving to Web Standards with SuperPreview

Expression Web Team — Tue, 15 Sep 2009 20:44:11 GMT

Internet Explorer 8 was an important release because it signaled a renewed emphasis on Web Standards at Microsoft. My team—which develops the authoring tool, Expression Web—is also pretty emphatic about Web Standards. We’re in the process of doing significant tooling (and retooling) so we can support existing and emerging specifications, reliably.

The Expression Web team recently shipped SuperPreview for Internet Explorer a FREE tool for performing cross-browser debugging in multiple versions of Internet Explorer, as well as helping migrate sites from earlier versions of IE to Web Standards in IE8. This is a subset of the full version of SuperPreview (which also supports Firefox) and which ships with Expression Web 3. You can download SuperPreview for Internet Explorer here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677 or the full version of SuperPreview with Expression Web 3 here: http://www.microsoft.com/downloads/details.aspx?FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc&displaylang=en

Expression Web SuperPreview in vertical Side-by-Side mode

As part of our product planning process, we talk to, and observe web developers in their “natural habitats.” During these sessions, it was clear that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes developers to preview pages in multiple browsers, there are a host of other issues:

Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
The ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.

We built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. With SuperPreview you can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note, the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

SuperPreview in Overlay Mode

In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6.

In the SuperPreview UI, we drew inspiration from browser-based development/debugging tools like the IE Dev toolbar. SuperPreview provides similar DOM views of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. Like the IE Dev toolbar, the DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

SuperPreview in horizontal Side-by-Side mode showing the DOM tree

In doing cross-browser debugging, it’s pretty easy to spot differences between pages. But, identifying the offending page element can be trickier. It’s not immediately apparent whether an element, its parent, or even a sibling is causing the problem. In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its parent <div> for peculiarities. I also confirmed that the logo was rendering correctly in, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.com (http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline, fixed the problem.

Expression Web SuperPreview gives Web authors a powerful tool for visualizing and debugging cross-browser layout issues. And, SuperPreview for IE is free, providing a potent way for developers to move their pages forward in a Standards-consistent fashion. Please give it a try! To learn more about Expression Web and SuperPreview, check out:

Download SuperPreview for Internet Explorer: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Somasegar’s blog on Expression Web 3: http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

Erik Saltwell on Expression Web SuperPreview:

http://visitmix.com/News/Expression-Web-SuperPreview

Expression Web learning resources:

http://expression.microsoft.com/en-us/cc197140.aspx

- Steve Guttman, Product Unit Manager, Expression Web

Free Internet Explorer debugging tool: Microsoft Expression Web SuperPreview for Windows Internet Explorer

Expression Web Team — Fri, 04 Sep 2009 00:53:36 GMT

Expression Web SuperPreview for Internet Explorer is a free stand-alone visual debugging tool that makes it faster and easier to migrate your sites from Internet Explorer 6 to Internet Explorer 7 or 8. Expression Web SuperPreview for Internet Explorer shows your web pages rendered in Internet Explorer 6 and either Internet Explorer 7 or Internet Explorer 8, depending on which version you have installed on your machine.

You can view the pages side by side or as an onion-skin overlay and use rulers, guides and zoom/pan tools to precisely identify differences in layout. You can even compare your page comp to how the targeted browsers render the page.

Expression Web SuperPreview for Internet Explorer not only shows a high-fidelity rendering of how pages will look on different browsers, but it also identifies the element’s tag, size and position, applied styles, and location in the DOM (Document Object Model) tree so you can quickly fix the error.

To download Microsoft Expression Web SuperPreview for Windows Internet Explorer, see:

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

If you’d like to debug your pages for both Internet Explorer and Firefox, download the free 60-day trial of Microsoft Expression Web.

Please note: DirectX must be installed on your computer before you can compare a web page to a PSD image. To install DirectX on your computer, visit the DirectX download page.

To discuss SuperPreview or Expression Web with others, try our forum at:

http://social.expression.microsoft.com/Forums/en-US/web/threads

Saffron Stroke: Expression Web tips and tricks

Anna — Thu, 20 Aug 2009 04:04:19 GMT

Minal Agarwal is a web and graphics designer who maintains a helpful blog at http://saffronstroke.com/ which is full of tips and tricks for Expression Web users as well as CSS hacks and web page templates. Minal has also contributed several articles to http://www.dotnetcurry.com for their Expression Web category. Check it out:

Displaying pages that use NTLM authentication in SuperPreview

Anna — Wed, 29 Jul 2009 23:29:01 GMT

As Steven posted earlier, if you try to display a password-protected page in SuperPreview, the program instead displays the page that appears when a site visitor tries to access the page without supplying login credentials.

I wanted to follow up Steve’s post to briefly clarify that SuperPreview does support NTLM authentication, which is commonly used by websites on corporate intranets. Pages on networks that use NTLM authentication don’t require the user to login to view the pages, instead, they rely on the site visitor’s Windows login credentials. So if your computer is on the same network as the page that relies on NTLM authentication, you should have no problems opening the page in SuperPreview. (For in depth information about NTLM, see http://msdn.microsoft.com/en-us/library/aa378749(VS.85).aspx.)

Anna

Workaround for viewing password-protected pages in SuperPreview

StevenSchermerhorn — Tue, 28 Jul 2009 01:57:00 GMT

I'm Steven Schermerhorn - one of the developers that worked on the SuperPreview program provided with Expression Web 3. Ever since we released the first BETA version of SuperPreview for Internet Explorer, the Expression Web team has received a lot of constructive feedback about SuperPreview. One suggestion we frequently receive is to add support for password-protected web pages.

Currently, if you use either the BETA version or the finished version of SuperPreview to view a page that requires login credentials, instead of displaying the page you requested, SuperPreview displays whatever page normally appears when a site visitor tries to view a password-protected page without logging into the site. We weren't able to provide that support in time for this year's release, however I have one suggestion that might help you work around this: enable debug access to the website you are developing. How you or your server admin enables debug access to the website all depends on your server's configuration and I cannot document all scenarios here.

Once you've enabled debug access to your website, you can use SuperPreview to display your password-protected page by opening the URL using this syntax: http://www.example.com/default.php?user=joe , where http://www.example.com is your site's domain, and default.php is the path to your page, and joe is a valid username.

This basic debug access isn't a feature you want enabled in a live, publically accessible server environment, so you should also setup additional security for your debug environment, such as to allow requests from only a particular IP range or a specific port that isn't available outside your network. For what it's worth, I used this kind of debug environment in nearly every web application I developed in my former life as a web developer.

Hope this helps!

-Steven

Expression Web 3 Sneak Peek

Expression Web Team — Sun, 07 Jun 2009 02:02:00 GMT

Curious about what's coming for Expression Web 3, and our latest progress on SuperPreview? S. Somasegar, Senior Vice President, Developer Division has posted a summary of several key new features in Expression Web 3 on his blog. Click here to read his post.

Lorem Ipsum Code Snippet on Expression Community Gallery website

Anna — Fri, 08 May 2009 01:02:00 GMT

I just made my first contribution to the newish Gallery section of the Expression Community website where anyone can add content and templates to share. Here’s a screenshot of the current categories:

One of many cool things about the gallery is that you can select a friendly URL name for your contribution and it’s instantly generated. I chose LoremIpsum because I contributed a code snippet that enables Expression Web users to easily insert up to five paragraphs of Latin lorem ipsum filler text into their page. Here are the new code snippets as they appear in the Code Snippets list of of Expression Web:

Here’s the URL of my contribution:

http://gallery.expression.microsoft.com/LoremIpsum

To read the rest of my blog post, in which I show you how to install and use the Code Snippet, and link to a post on how to create your own code snippet, see my post Lorem Ipsum Code Snippet.

Anna

Until June 30, 2009, free copy of Expression Web 2 and 60 days free hosting

Anna — Wed, 06 May 2009 22:13:23 GMT

To learn more about this offer, go to the following URL and be sure to read the fine print:

http://www.microsoft.com/web/jumpstart/platinum-hosting/default.aspx

Solve Expression Web installation problems

Anna — Wed, 06 May 2009 20:54:20 GMT

The team that provides technical support for Expression Web maintains a very helpful blog at http://blogs.msdn.com/xwebsupport, which I’ve just added to our blog roll. Their latest post provides solutions for solving problems with installing Expression Web 2:

http://blogs.msdn.com/xwebsupport/archive/2009/04/21/known-causes-for-expression-web-2-installation-crashes.aspx

New content portal for FrontPage users transitioning to Expression Web

Anna — Fri, 01 May 2009 02:35:36 GMT

The Expression community website has a new portal devoted exclusively to helping FrontPage users transition to using Expression Web: http://expression.microsoft.com/frontpage

The FrontPage to Expression Web portal currently features:

A Getting Started area:
A Community Resources area that presents a different resource each time you visit the page:
Step-by-step solutions written exclusively for FrontPage users:
And How Do I? Videos which feature a different video each time you visit the page:

The initial launch of this website was done with the input of FrontPage MVPs and Expression Web MVPs, as well as Microsoft employees. To make this portal as useful to FrontPage users as possible, we need YOUR ongoing input to ensure we’re providing FrontPage users with the resources they need to successfully move to Expression Web. To suggest article ideas and other content for the FrontPage to Expression Web community website please email fp2xweb@microsoft.com.

Anna

Manage your FPSE Site permissions without using FrontPage 2003

sayuri — Fri, 10 Apr 2009 22:29:00 GMT

When former FrontPage users first start using Expression Web, a common question is “How do I edit the permissions to my Website or subweb?”.

While FrontPage 2003 provides users the ability to manage permissions to their FPSE Website through an Administration Website linked to from the application, Expression Web doesn’t provide the same level of integration.

When using FrontPage 2003 to edit your FPSE Website or subweb, users can manage its permissions by using the Tools -> Server -> Permissions menu. That will bring up the Administration Website for your FPSE Website on your Web browser.

When using Expression Web to edit your FPSE Website or subweb, you can browse to http://[Server_Name]/[FPSE_Web_site_Name]/[Subweb_Name]/_vti_bin/_vti_adm/fpadmdll.dll on any browser after substituting [Server_Name], [FPSE_Web_site_Name] and [Subweb_Name], with the appropriate strings.

For example:

To edit the permission for the FPSE Website http://xweblab01sql/SurfHaven, just use your browser to browse to http://xweblab01sql/SurfHaven/_vti_bin/_vti_adm/fpadmdll.dll and you'll be prompted for the appropriate username and password if needed.

To edit the permission for the subweb "Hawaii" in the FPSE Website http://xweblab01sql/SurfHaven, browse to http://xweblab01sql/SurfHaven/Hawaii/_vti_bin/_vti_adm/fpadmdll.dll

On this Administration Website, you can specify the following:

To use the same permission as the parent Website or not
If you decided to use a different set of permission as the Parent Website, you can fine-tune your Website or subweb permissions by:

Allowing or disallowing anonymous access
Managing its users
Managing its user roles

Sayuri Wijaya
sayuri.wijaya@microsoft.com
Expression Web Program Manager

SuperPreview Usability Study

Expression Web Team — Wed, 25 Mar 2009 02:30:00 GMT

The Expression Web team is seeking individuals with web design experience for a usability study focusing on Expression Web SuperPreview.

In particular, we are looking for individuals with experience designing web pages (writing and diagnosing markup, CSS) for compatibility in multiple browsers.

Participant Criteria:

Participants do not need to have experience with Expression Web SuperPreview.We are looking for new users and experienced users.
Participants will need to sign a non-disclosure agreement (NDA).
Participants must be in the Redmond or Seattle area.
Study will take approximately 1-hour to complete.

The usability studies will be conducted between March 26 and April 3.

If you or somebody that you know meet the participation criteria and would like to participate, please contact justin.harrison@microsoft.com.

Thanks!

Justin Harrison

Program Manager – Expression Web

SuperPreview for Internet Explorer

Expression Web Team — Thu, 19 Mar 2009 01:50:00 GMT

Hi,

My name is Justin Harrison and I worked with Alex Moskwa to get SuperPreview for Internet Explorer ready for this release. You can find me on Twitter as @JustinHar.

Today we announced public availability of SuperPreview for Internet Explorer. Since this morning a number of frequently asked questions and issues have emerged and now seems like a good time to address them!

1. I only see Internet Explorer 8 in SuperPreview - I thought SuperPreview includes Internet Explorer 6.

Internet Explorer 6 is not available on Windows 7. This is a known issue that will be addressed in later releases.

2. How do I get Firefox and Safari to show up in SuperPreview?

Expression Web SuperPreview for Internet Explorer only supports Internet Explorer. Expression Web 3 includes SuperPreview with support for Firefox and Internet Explorer. Safari for the Mac will be supported with our cloud service to be made available sometime after Expression Web 3 is released.

3. Is there any more information available about the SuperPreview cloud service?

The cloud service will be made available sometime after Expression Web 3 is released. The cloud service will support Safari for the Mac. At this time we have not announced our plans for other browsers and platforms on the cloud service.

4. Are there any plans to support other browsers such as Opera, Chrome, or Safari for Windows?

At this time we have not announced our plans for supporting for browsers other than Firefox, Safari for the Mac (with our cloud service), and Internet Explorer.

5. The error message "Insufficient memory to continue execution of the program." displays while analyzing a page.

This is a known issue. See the Expression Web Forum for a workaround.

6. SuperPreview for Internet Explorer crashes when I start it.

This is a known issue that has to do with running SuperPreview in VMware Fusion. See the Expression Web Forum for a workaround.

7. I am encountering a bug or have feedback about SuperPreview.

Click on the bug icon in SuperPreview and follow the on screen instructions to submit a feedback report.

Release Notes

There are a number of documented, known issues in this beta release of Expression Web SuperPreview for Internet Explorer. Known issues are problems that we plan to address in later releases.

Filters/Behaviors in Internet Explorer 6 do not work properly. This impacts most IE6 PNG transparency workarounds.
SuperPreview does not support sites that require authentication.
Mouse over highlight of DOM elements may not work properly.
SuperPreview may have trouble analyzing very long pages.

For the complete list, click here.

The Expression Web team takes customer feedback very seriously. If you have any suggestions for SuperPreview or if you are encountering any issues, please use the feedback button in SuperPreview.

SuperPreview Technology

amoskwa — Wed, 18 Mar 2009 21:31:00 GMT

Hi, I'm a Program Manager for SuperPreview and wanted to blog a bit about how the technology of SuperPreview works. My goal is to help our users better understand the capabilities of SuperPreview and some of its limitations.

SuperPreview captures an image rendering and DOM after a web page loads.

SuperPreview relies on the locally installed browser rendering engines to take a snapshot in time of how the page is rendered. In taking this snapshot we do a few things to provide the most complete picture possible.

Capture key information from the Document Object Model of the browser. We provide users with information that will help them indentify their elements and diagnose problems. For every visible element on the page this information includes:
- ID and Class
- Height & Width
- Position on page from top left corner.
Scroll the viewport to get a full rendering of the web page regardless of the page's length.

It is important to note, this is a snapshot in time, so interactive elements such as Javascript roll-over or accordion menus will not manifest in SuperPreview.

Javascript support through onLoad in SuperPreview

Through exhaustive testing we found that many sites use Javascript to do fix ups on their pages to address cross browser problems. To support web designers and developers using these types of fixes SuperPreview runs Javascript up thru the onLoad event of the page. After the onLoad Javascript runs we take our snapshot rendering of the page to get the most accurate picture possible of how your site will present itself to your users.

How the available browser list is built.

To do comparisons, SuperPreview for Internet Explorer uses your locally installed browser versions. It also includes a copy of Internet Explorer 6, allowing users to escape the neccessity of a virtual machine for testing IE 6. Depending on which version of IE you have installed different browser versions will appear available in SuperPreview.

Installed Internet Explorer Version	Browser Choices Available
IE 6	IE 6
IE 7	IE 6, IE 7
IE 8	IE 6, IE 8, IE 8 (Compatibility View)

Known Issues

We are currently aware of problems with IE 6 not showing up on Win 7 and are actively investigating. For other known issues please review the Release Notes (readme.en.htm in your install directory.)

Links

Download SuperPreview for Internet Explorer

Hopefully this post will help you better understand what SuperPreview does and how you can incorporate it into your workflow to more easily design cross-browser compatible sites.

Thanks,
Alex Moskwa