IE7 and contentEditable

IE7 and contentEditable

Interestingly (I'm playing it rather loose and free with the term 'interestingly' here) I found that removing the contentEditable attribute from some elements cause them to become editable in IE7. The senario is this, HTML comes in, you don't know if it contains contentEditable attributes, but if it does you want to remove them. Run a function on the HTML to remove attributes. This was being done in jQuery.

$("*").removeAttr("contenteditable");

The effect of the above was some elements became editable in IE7, also list-items where missing their markers (common IE behaviour if contentEditable is true) running a function to set the attribute to false...

var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length;i++){
    els[i].contentEditable = false;
}

... this will stop the content from being editable in IE7 but wouldn't fix the missing bullet markers. I still can't find a fix for this, so resorted to cleaning the HTML and stripping out the contentEditable attributes on the server before sending the HTML down to the client. (You can always rely on IE to give you something to do! : )

Also, interestingly *cough*, an embedded browser in a .NET app will use the oldest version of IE loaded on the machine, rather than the newest. So if your client is using IE9, it's still quite likely that they have something like IE7 in your .NET app. Worth setting the metadata X-UA-Compatible to IE=edge, this seems to have the effect to force the system to use the latest installed version of IE.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

As the above may cause validation errors, you might want to put this in your apache config instead...

Header set X-UA-Compatible "IE=edge"

Where ever you set this header, remember where it is, I have a nasty feeling it'll need editing at short notice at some point in the future!

What I learned this week; Ganache

What I learned this week; Ganache

It is possible to ruin a ganache, you stir it like crazy when it still hot! Since I was stuck with it, not having any more cream, I mixed it with a hand blender when it was just getting cool. It didn't have the glossy sheen it should, but made an acceptable covering for the cake.

Also, having had some IE7 problems when loading YUI3 at the bottom of the page I've gone and stuck one in the document head for older versions of IE.

<!--[if lte IE 7]>
    <script 
        type="text/javascript" 
        src="/lib/yui/${yuiVersion}/build/yui/yui-min.js"></script>
<![endif]-->

On a related point, it seems that in IE9 borer-radius is supported, but not in conjunction with a gradient filter, at least not on what I was doing, so decided that I'd rather have the rounded corners than the gradient.

<!--[if IE 9]>
  <style type="text/css">
    #divContainer div.topbar {
        border-radius:10px 10px 0 0;
        filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
  </style>
<![endif]-->

IE, butters text after filter is applied

In my little world IE8 usage over took IE7 for the first time last month, so decided to try to sort out my JavaScript fades which I disable for IE. The problem with the fades is after the fade in ends the text is blurred, fuzzy and generally butters!

TODO: add image of butters text...

I haven't looked into this in any great depth, but the problem seems to be with clearType text in IE and obj.style.filter. If you apply the Alpha(opacity) filter the text gets mashed up, so setting obj.style.filter="Alpha(opacity=100)" breaks the anti-alias on text.

One work around is to set a background colour on the element your going to apply a filter to. If you don't know which elements your going to fade in advance you can reset the filter after the fade has run, which isn't ideal but better than nothing.

I user a method similar to the bellow for setting opacity

/** @id Transition.SetOpacity */
function SetOpacity(el,opacity){
    opacity = (opacity>=100)? 100 : opacity;
    el.style.opacity   = (opacity / 100); 
    el.style.MozOpacity  = (opacity / 100); 
    el.style.KhtmlOpacity  = (opacity / 100); 
    
    // private method to set opacity in IE
    setIEOpacity(el,opacity)
  
    function setIEOpacity(el,opacity){
        if (!el.currentStyle.hasLayout){
            // give element layout
            el.style.zoom = 1;
        }
        if (!el.originalFilter){
            // save the original filter, if one exists, so you can replace it after fade 
            el.originalFilter = el.currentStyle.filter || 'none';
        }
        // if opacity = 100 put the original filter back
        el.style.filter = (opacity == 100) ? 
            el.originalFilter : 
            'progid:DXImageTransform.Microsoft.Alpha(opacity='+ opacity + ')';
    }
}

NB. for a fade to work in IE at all, the element needs to have layout (obj.currentStyle.hasLayout) this is a read only attribute, to set it to true you need to give the element a style that will trigger it to set .hasLayout to true. I normally set the zoom style to 1 in an IE only stylesheet. For other ways of tringering hasLayout see haslayout.net