Lukav’s Weblog

The latest discovery on IE problems was that when you use float divs and you decide to print IE, either ignore the floats or to be more precise, if you don’t explicitly specify width it just expands them to 100%.

There are some posts on the network, but all of then suggest to not use float when printing. However this was no good for me, cause I arranged me forms with css and no tables. The solution of fixing the with of floats was also no good, since I have different internationalization and some text differ in length.

So since I couldn’t find any css solution I had to make a simple JS hack.

In turns out IE has to useful events - onbeforeprint and onafterprint. So I just used those to go over all my floating elements and set the width before printing:

// We try to fix printing styles because IE is has problems
if (OAT.Browser.isIE) {
 OAT.Event.attach(window,"beforeprint",function() {
 	var elm = IB.PageContent.getElementsByTagName('div');
 	for (var i=0;i<elm.length;i++)
 		if (OAT.Dom.isClass(elm[i],’right’) || OAT.Dom.isClass(elm[i],’left’)) {
 			var size = OAT.Dom.getWH(elm[i]);
 			elm[i].style.width = size[0] + ‘px’;
 		}
 	}
 });
}

The example uses the OAT library, but you can guess what it does.

This fix works fine with the little exception that the divs move a little before print, but I can live with this for now.