Browser-specific CSS files

MicroStrategy Web pages can be viewed in a number of browsers. However, browsers often differ slightly in their implementation of CSS properties so that, for instance, a particular set of margins may look good in one browser but unacceptable in another. To handle cross-browser discrepancies, MicroStrategy Web 8.x uses browser-specific CSS files.

For every MicroStrategy Web page, the application reads the type of browser, generates a single <link> tag that references the appropriate browser-specific CSS file, and places it in the <head> section of the HTML source code for that page. HTML code similar to the code shown below is generated within the <head> section of the HTML source code for every MicroStrategy Web page based on the browser being used to view the page. The code sample below illustrates the <link> tag generated when a MicroStrategy Web page is being viewed with Internet Explorer 6.

This browser-specific <link> tag is placed after the application-wide <link> tags (generated by the "links" <page-section> node of the default page) and the page-specific HTML <link> tags (generated by the "links" <page-section> node of the specific page being viewed). This enables the browser-specific CSS to override the application-wide CS and page-specific CSS.

The order of the <link> tags is important because if two <link> tags include different values for identical class definitions, the link defined last in the HTML overrides the other link. MicroStrategy Web relies heavily on this rule for making sure that the proper style rules are applied for every page in the MicroStrategy Web application.

The tag for Browser-specific CSS files is also generated by mstrWeb.jsp as <web:value type="misc" name="browserSpecificCSS"/> and by Main.aspx as <web:value runat="server" type="misc" name="browserSpecificCSS"/>.

A specific example of the need to address CSS implementation variations in different browsers is the rendering of textbox labels. The application-wide CSS files in MicroStrategy Web specify the “float: left” property for a textbox label, a property that works correctly in most browsers. However, Netscape 6 browsers have a bug which prevents them from rendering labels with a “float: left” property. In this case, the CSS file corresponding to Netscape 6 is used to overwrite the “float: left” property with a “float: none” rule.

The table below lists the some primary browser-specific CSS files in the /style/mstr/ subfolder and the browsers with which each CSS file is used.

CSS file	Browser with which the CSS file is used
firefox3.css	Firefox 3-specific support
firefox2.css	Firefox 2-specific support
firefox.css	Firefox 2 and Firefox 3
ie7.css	Internet Explorer 7
ie6.css	Internet Explorer 6
nn6.css	Netscape 6.x