HtmlBox Styling

Developer: DOSLib
Summary: Discusses how to enable visual styles on buttons and controls in HTML dialogs.

Question

I am trying to make an HTML dialog box and display it with DOSLib's dos_htmlbox function. If I preview the dialog in Internet Explorer, I get the styling I want, which is the default styling for buttons, input fields, etc. used by the operating system. It looks identical to the user interface controls in Rhino.

When I use the dos_htmlbox functionto display the dialog, it looks much different and less appealing. Could it be that the dos_htmlbox and the web control that it is using are displaying with a “wrong” default style sheet? I would appreciate any help on this problem, my goal is to make a user interface which perfectly fits into AutoCAD's existing user interface elements.

Answer

To enable visual styles for your dialog, add the following META tag to the <head> section of your HTML file:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">

More Information

There are many applications, written in HTML and deployed as an HTML Application (HTA) or a Win32 application, that use HTML or host the WebObject in their user interface (UI) elements. These applications can have the same look, when running on Windows, that is consistent with Win32-based applications running on the same operating system. The following are some considerations when applying visual styles to HTML content.

Visual styles in relation to HTML content applies only to Intrinsic HTML Controls such as buttons, scroll bars, and select controls. The Windows visual style is applied automatically to controls on HTML pages. If you do not want your page to have a visual style applied, use the META tag with its attribute set to no. The META tag is documented in a following section.

HTML pages that modify the Cascading Style Sheets (CSS) properties such as background or border do not have a visual style applied to them. They display the specified CSS attribute.

When specified as part of the content, most CSS properties do apply to elements that have visual styles applied.

By default, visual styles are applied to Microsoft Internet Explorer. However, there are options in Internet Explorer that enable you to turn off visual styles. To turn visual styles on or off on an HTML page, either choose Options in the browser, or set the META tag on a page. To use the META tag, add a META tag to the <head> section of your pages. You need to add this tag only once; visual styles apply it to all the page content. This also applies to content packaged as HTAs. To turn on visual styles, the META tag must be as follows:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">

To turn off visual styles, use the following:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="no">

Note, if the browser setting and the tag setting do not agree, the page will not apply visual styles. For example, if the META tag is set to “no” and the browser is set to enable visual styles, visual styles will not be applied to the page. However, if either the browser or META tag is set to “yes” and the other item is not specified, visual styles will be applied.

Be aware that visual styles might change the layout of your content. Also, if you set certain attributes on Intrinsic HTML Controls, such as the width of a button, you might find that the label on the button is unreadable under certain visual styles.