Favourite Projects



IE css float print problem

August 28th, 2007 by lukav

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.

Posted in EN, OAT, Tech | 2 Comments »

2 Responses

  1. Anonymous Says:

    why not have two style sheets, one for screen that has floated divs and no width, the other for print that has float:none and set widths.

  2. lukav Says:

    Intersting idea. Could you give an example?

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.