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 them suggest to not use floats when printing. However this was no good for me, cause I arranged my forms with css and no tables. The solution to fix the width 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 two 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.