PRB: BitmapViewer Is Displayed Incorrectly in Internet Explorer Using CSS1-Compatible Mode

This article describes how to resolve a problem with incorrect rendering of the BitmapViewer web control in Internet Explorer (when scrollbars are disregarded and the image is overflowed out of the control area).

Symptoms

Under some circumstances an image displayed in the BitmapViewer web control overflows the control area (it is drawn above scrollbars). This problem occurs in Internet Explorer only:



In alternative browsers such as Firefox, Opera, Safari, Konqueror, etc. the control is displayed properly:





Reason

This problem occurs only if the browser is switched into CSS1-compatble mode. Internet Explorer is not 100% compatible with CSS1 (from the point of view of the specification). In particular it does not handle certain elements properly and therefore disregards scrollbars.

However Internet Explorer can work in so-called quirk mode. This is a mode of backward compatibility with previous versions of Internet Explorer.

CSS1-compatible mode is set when you use one of the following DTD declarations at the top of the HTML page with the BitmapViewer:







Typically such declarations are inserted when you create a page in Visual Studio 2005.

Solution

To eliminate this problem you should switch the browser into the quirk mode. It can be done by specifying the HTML 4.01 Transitional DTD declaration without system identifiers (URI references):



Alternatively, you can just remove the DTD declaration.

As soon as you apply all necessary changes, BitmapViewer will work properly in Internet Explorer:



Note: if you are not going to use Internet Explorer as a client platform of your web application, and expect to use some alternative browsers like Firefox, Mozilla, Safari, and Opera, you can continue using CSS1-compatible mode. These browsers will work properly with any DTD declaration.

See Also

MSDN: compatMode Property