DotNetNuke Internet Explorer font scaling

Updated May 2009 to cope with MinimalEntropy skin.

When you put content onto a DotNetNuke (DNN) site you must think how other users see your information. By default, if your visitors use Internet Explorer (IE) then most of your site will NOT resize according to the user's Text Size setting. In my opinion this is not good practice because some users prefer larger text than others. This post shows how to make DNN fonts scale correctly. An earlier post shows what happens if you do not make my changes.

In this post I make the changes in a portal.css stylesheet file - click here to download DNN_ScalingFont_Portal_090511.css. You may use and update this file freely provided you retain the attribution to Chris Cant. Note that this CSS file only affects the fonts shown to ordinary users - Edit and Admin fonts are unchanged.

To use my CSS file, log in as an Administrator or Host then choose [Admin][Site Settings]. Scroll down and open up the [Stylesheet Editor]. Select all the existing text, copy and paste to a local text file as a backup. Insert my CSS file at the start of the style sheet textarea, then click on [Save Style Sheet]. To see the effect of the new file, you will have to navigate to a new page (eg Home) and refresh your browser (F5).

Note that my CSS stylesheet is not guaranteed to make all fonts scale on your site - the current skin and container may have definitions that take precedence over the portal CSS. Please test this stylesheet carefully on all pages of your site before putting into production use.

How it works

DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:

1. Portal default CSS (in /portals/_default/default.css)
2. Current skin CSS
3. Current container CSS
4. Portal CSS (eg in /Portals/0/portal.css)

The portal default CSS has fixed-size definitions for many generic HTML elements as well as many DNN-specific classes. My substitute Portal CSS overrides these definitions. Because the portal CSS is included last, it has a good chance of having its definitions used, though some skins and containers may have specific definitions that take precedence.

The DNN Portal default CSS uses fixed size fonts, eg H1 has font-size:20px. This is fixed in my CSS by specifying the font size as font-size:x-large which lets IE resize the font as the user changes Text Size.

Font Family Definitions

The first section of my CSS gathers all the font family definitions into one place. By altering the definitions here, you should change all the font families that are normally visible. The normal fonts are defined here as being Tahoma, Arial, Helvetica; the BLOCKQUOTE, PRE and CODE elements are Lucida Console, monospace. Alter all instances of both of these as you wish.

Scaling fonts and default weights/colours

The next section of my CSS file does the main work of redefining generic HTML tags and DNN classes. The general HTML elements are put back to standard font size, colour and weight. Firefox (FF) and IE have different (but similar) defaults - the IE default is used.

Next, various DNN classes are defined to use scaling font sizes.

Main menu and Module container menu scaling

The main menu and module container menu are now made scaling. The main menu bar by default has a fixed size of 16px. This is changed to have a scaling size of 2em. The font sizes of the menu classes are defined as 1em. A similar job is done for the module container menu classes.

Other classes

The existing style sheet has definitions for various classes used by the standard DNN template. In many cases you can clear these definitions.

Example sites

• dnn.phdcc.com
• http://www.identifynature.com/
• http://www.merchistontennis.net/
• http://www.festivaloffice.com/

DotNetNuke Internet Explorer fixed size fonts

DotNetNuke (DNN) by default uses many fixed size fonts in its standard CSS styles. I show the effect of these fixed font sizes in Windows Internet Explorer (IE) as you change the text size from Smallest to Largest. Within Text/HTML modules, everything is fixed size except text within TD elements.

DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:

1. Portal default CSS (in /portals/_default/default.css)
2. Current skin CSS
3. Current container CSS
4. Portal CSS (eg in /Portals/0/portal.css)

The Portal default CSS file has definitions for many generic HTML elements (as well as defining many DNN specific CSS classes). For example, tag H1 is defined as having font-size: 20px;

DNN defines fixed font sizes for these generic HTML elements:
H1, H2, H3, H4, H5, H6, DT, TFOOT, THEAD, TH, SMALL, BIG

There are two cases that I would like to highlight: (a) writing HTML within a Text/HTML module and (b) writing HTML within a custom module or in a skin/container.

In the following examples, you will need to remember that the module output is encased first a module container and (outside that) the skin. In the test environment, both the skin and container ContentPane elements are TD elements.

IE Scaling in a Text/HTML module

When you place a Text/HTML module on a page, the module always surrounds the entire text in a DIV element that has an attribute class="Normal". The Normal class is defined in the default CSS as having a fixed point size (font-size: 11px;).

The following image shows two screenshots that let you compare how Internet Explorer displays various tags with the Smallest font size on the left and the Largest font size on the right. As you can see, the only text that scales is within a TD tag.

It is important to understand what is happening for the other elements. The P tag for instance does not have a definition in the default CSS. However it inherits its font size from its surrounding DIV tag which has class "Normal" that has a fixed size. For some reason, the TD tag does not inherit this font size.

Note that other tags in the example have fixed font size definitions in the default CSS, eg H1 is defined as having font-size: 20px;


IE Scaling in a custom module or skin/container

The following screenshot shows the same HTML - this time in a custom module (not Text/HTML). The output will be the same if you place the HTML within a skin or container.

In this case, the HTML is NOT surrounded by a DIV element and so the HTML does not inherit the Normal class. This time, the P, TD, DIV, DD, BLOCKQUOTE and PRE tags scale as you change the IE font size. This is because all these elements do not have a (fixed size) definition within the DNN default CSS. All the other elements stay the same size because they do have fixed size CSS definitions.


Conclusion

When you put content onto a DNN page you must think how other users see your information. If your visitors use Internet Explorer then most of your site will NOT resize according to the user's Text Size setting. In my opinion this is not the recommended practice because some users prefer larger text than others - more on how to make all your text resize in my next blog entry.

The Firefox Text Size and Internet Explorer Zoom Level options DO alter the size of fixed size fonts.

To achieve a consistent fixed size effect you need to provide a font size definition for any TD elements you use within Text/HTML modules. For text in other modules or skins, you need to think carefully about which elements scale and which do not.

To change the sizes of the fonts used for various elements, you can alter any of the CSS files mentioned at the top of this post - typically it will be easiest to alter your Post CSS file.