Main menu

IE6 fixes for Umbraco 4.5

23 Mar 2011
Published by matt in

Tags 

umbraco, ie6

Umbraco 4.5 is not so huge a departure from previous versions that IE6 support is impossible.

The tree

The tree works but is a bit of a mess due to some positioning issues, and the use of positioned background PNG sprites.  To fix these, append this to /umbraco_client/tree/themes/umbraco/style.css.

/* IE6 hacks */
.tree-umbraco li a {padding-left:18px !important;behavior: url(/assets/iepngfix/iepngfix.htc);}
.sprTreeFolder {background:url(/umbraco/images/umbraco/folder.gif) !important;}
.sprTreeDoc {background:url(/umbraco/images/umbraco/doc.gif) !important;}
.sprTreeDoc2 {background:url(/umbraco/images/umbraco/doc2.gif) !important;}
.sprTreeDoc3 {background:url(/umbraco/images/umbraco/doc3.gif) !important;}
.sprTreeDoc4 {background:url(/umbraco/images/umbraco/doc4.gif) !important;}
.sprTreeRepository {background:url(/umbraco/images/umbraco/repository.gif) !important;}
.sprTreeDeveloperMacro {background:url(/umbraco/images/umbraco/developerMacro.gif) !important;}

The IEPNGFix I'm using here is redundant as I am overriding specific tree node types with single images.  If you use other doc types, you will need to add them here.

Dialogs

Most of the dialogs (insert image, insert macro etc) won't work in IE6, and will throw obscure script errors.  This is because the dialog pages have self-closing BASE tags, meaning that IE6 interprets the document is mostly residing in an unclosed BASE element, playing havoc with the DOM.  To fix these, simply check all the files in /umbraco/plugins/tinymce3, and replace the existing <base /> tag with:

<base target="_self"></base>

These fixes get Umbraco 4.5 into a usable state for IE6, though there will no doubt be further minor issues.