By:
There are a lot of posts in the DotNetNuke forums about cross-browser issues in a DotNetNuke skin.
The problem is mostly that the skin does not render the same in Internet Explorer and Firefox.
As most of these issues are quite easy to prevent / solve, here's how to prevent most of them.
Use an XHTML doctype.
Internet Explorer 6 and 7 are not very good at respecting the W3C HTML / CSS standards.
This is especially true if the page doctype is not XHTML.
Switching to XHTML forces even IE 6 to render way better then with the default DNN HTML 4 transitional doctype.
How to set the doctype for your DotNetNuke skin?
There are 2 ways to force DotNetNuke to use an XHTML doctype:
A. You can set the doctype for a specific skin by including a doctype.xml file.
The name of this file should be: "skinname".doctype.xml.
So for every HTML / ASCX file you will have to add an XML file.
The content of this file should be:
<SkinDocType>
<![CDATA]<!DOCTYPE>[]>
</SkinDocType>
The <!DOCTYPE> part should be replaced with the HTML doctype you want set.
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
B. You can set the Fallback doctype in host settings.
Choose Host > Host Settings and select the doctype under “Fallback Skin doctype”.
This will force all skins on all portals without a doctype.xml file to use the doctype you set.
Please beware that this could potentially lead to unwanted effects if there are non XHTML skins in other portals then the one you are targeting.
C. Set the doctype with our StyleHelper skin object
<fortyfingers:STYLEHELPER ID="STYLERHELPER2" doctype="XHTML transitional" runat="server" />
Documentation
Validate your HTML
Most modern browsers render compliant HTML quite good but they do not render consistently if your HTML does not validate.
Browsers solve unclosed tags or incorrectly nested elements differently for instance.
You can prevent this by using an HTML validator for your skin and look for structural errors.
How do you validate your DotNetNuke skin?
A. You can use the W3C Validators.
B. You can use the HTML Validator extension for Firefox as it validates inside the browser, the site doesn't even have to be online. (It's also faster than the W3C validator).
Issues with the default Actions Menu
If you use absolute positioning in your CSS, you might experience issues with the module actions menu in certain browsers in combination with DNN 4 or 5 (in 6 they should be solved). The menu does not appear below the dropdown arrow but offset to the left and / or bottom, sometimes even out of sight.
This is caused by the positioning script the actions menu uses.
How to prevent issues with the actions menu?
A. Don't use absolute positioning (although that is not always possible).
B. There is a free open source actions menu that does not have this issue.
Personally I use the alternative actions menu as it's also easier to style.
Solving other cross browser skin issues
First make sure you skin works correctly in FF and IE8.
Then test it in Internet Explorer 7 and 6 and identify the issues.
Although you can use browser hacks in your skin, this is not the cleanest approach.
I prefer to add a separate CSS file for "buggy" browsers, keeping the main CSS file clean.
There are 2 ways to load a CSS file specifically for a certain browser, the Core Styles Skin Object, which loads stylesheets for Internet Explorer and our own Stylehelper Skin Object, which can detect all browsers and load a CSS file.
A. Use the Core Styles skin object
(available in DNN 4.9+)
This skin object injects a conditional stylesheet for Internet explorer.
How to use the DNN core styles skin object:
In an HTML skin you add (DNN 5):
<object id="…" codetype="dotnetnuke/server" codebase="STYLES">
<param name="Condition" value="…" />
<param name="StyleSheet" value="…" />
<param name="Name" value="…" />
</object>
In an ASCX skin:
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<dnn:STYLES runat="server" id="…" Condition="…" StyleSheet="…" Name="…" />
Attributes:
ID:
Unique id for this skin object
Condition:
What browser to add this stylesheet for.
You can use:
"IE 6" for Internet Explorer 6
"lt IE 7" for Internet Explorer lower then version 7
"gt IE 6" for Internet Explorer greater then version 6
StyleSheet:
Path to the CSS file relative to the skin path.
Name:
Enter a name for this skin object (mandatory).
Examples:
<dnn:STYLES runat="server" id="StylesIE8" Name="IE8" StyleSheet="IE8.css" Condition="IE 8" />
<dnn:STYLES runat="server" id="StylesIE7" Name="IE7" StyleSheet="IE7.css" Condition="IE 7" />
<dnn:STYLES runat="server" id="StylesIE6" Name="IE6" StyleSheet="IE6.css" Condition="IE 6" />
B. 40Fingers Styles Skin Object.
Our Stylehelper Skin object detects the browser on the server side and only injects a stylesheet for the targeted browser.
Contrary to the styles skin object it also detects other browsers then Internet Explorer.
(It also supports a lot of other conditions for injecting or removing CSS links, JS files and Meta tags)
How to use the 40Fingers Style Helpers skin object:
In an HTML skin (DNN 5)
<object id=" …" codetype="dotnetnuke/server" codebase="40FINGERS_STYLEHELPER ">
<param name="IfBrowser" value="…" />
<param name="AddCssFile" value="…" />
</object>
In an ASCX skin:
<%@ Register TagPrefix="dnn" TagName="40FINGERS_STYLEHELPER" Src="~/DesktopModules/40fingers/skinobjects/stylehelper/StyleHelper.ascx" %>
<dnn:40FINGERS_STYLEHELPER runat="server" id="…" IfBrowser="…" AddCssFile="…" />
Attributes:
ID:
A unique ID for the skin object
IfBrowser:
Will add the CSS file if the browser meets this condition.
AddCssFile:
Path to the CSS file relative to the skin folder.
More info on this skin object here: 40Fingers Style Helper Skin Object
Examples (ASCX):
<dnn:40FINGERS_STYLEHELPER runat="server" id="IE8" IfBrowser="IE=8" AddCssFile="css/IE8.css" />
<dnn:40FINGERS_STYLEHELPER runat="server" id="LtIE7" IfBrowser="IE<7" AddCssFile="css/IE7min.css" />
<dnn:40FINGERS_STYLEHELPER runat="server" id="Firefox" IfBrowser="FF" AddCssFile="css/FF.css" />
I hope this helps you to prevent / solve some of the most common issues with cross browser skins.
Timo Breumelhof