Wednesday, July 22, 2009

DotNetNuke module development : Broke UI while using AjaxControlToolkit TabPanel

I was developing a DotNetNuke module for our Code71.com website. I was using ajaxcontroltoolkit’s tabpanel for this module. Everything was working fine in firefox. But when I checked that module in IE, UI of the TabPanel was broken :(.


casestudy_broken

I searched in for the issue, but could not find related to this problem. After spending a whole day trying to solve the problem (by changing css), I found that it was working fine with the default skin of DotNetNuke but broken with my custom skin! Then I copied all code from default skin to my custom skin, but still it was broken :(. Then I compared rendered HTML for two different skin and found that only difference is in DOCTYPE!


In my custom skin, I did not defined any DOCTYPE, so it was automatically generating -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Then I changed the DOCTYPE and the UI was working fine.




casestudy_fixed




To define a DOCTYPE for your skin in DotNetNuke, you have to create a xml file defining the DOCTYPE in your skin directory. This xml file should be named as [SkinName].doctype.xml. For example, if your skin name is MySkin then DOCTYPE file name will be MySkin.doctype.xml. Content of the xml file should be like this -



<SkinDocType>

  <![CDATA[<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>


</SkinDocType>

1 comment:

Jitu said...

Thanks for sharing.