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.