Posts and Pages Tagged ‘IE8’

page-break-after failing with position:absolute and floated elements Last updated:7 February 2012

In the last couple of days I’ve been working on a small application to print raffle ticket numbers, which requires a certain number of tickets to be printed per page. In a simple case I was able to generate four consecutive numbers per page and then enforce a page-break via page-break-after:always. So far so good.

I then floated some elements within the page, which caused the page break to fail in every browser I tried (including FF10 and Opera 11 – and if it doesn’t work in both of those, something’s wrong…). This persisted even with the floated elements enclosed in non-floated elements to which page-break-after was applied. Some Googling suggested floats don’t play nicely at all with page-break, so with gritted teeth I used tables instead, and all was well.

Later, I needed use absolute positioning for the ticket numbers. You can’t use absolute positioning directly within a td element, so I included a div nested within the td. This broke the page-break again. Fine without absolute positioning, broken with – tested in FF10. Amazingly this fails in FF10 but works in IE8 (and that’s not a phrase I’ve written often). Investigating this I added a border to the td element, just so I could see what was happening on the page, and all of a sudden everything was fine again. By experimentation, a single border on the td fixes the problem in FF10 – even if it’s transparent. Weird.

So, to summarise, with the following html structure:

<td><div><p>Some text</p></div></td>

and this css:


then Firefox 10 does not honour the page-breaks, but IE8 does. Making the css:

td{border-bottom:1px solid transparent}

results in Firefox 10 printing correctly.

jQuery fadeIn and fadeOut problems with IE8 Last updated:29 October 2010

I’ve just written a jQuery plugin to allow a user to simply configure some dropdown menu animations. It tests fine in IE6 and IE7, but the fadeIn/fadeOut didn’t work in IE8. Unbelievable. It astonishes me the things that fail in IE8 but were fine in IE7.

The specific instance here was fading a drop down ul element, which was positioned absolutely with respect to an li element with position:relative. You know, standard stuff. Turns out IE8, position:relative and fade don’t play nicely. The solution in the end turned out to be applying:


to the li element. Applying this to the ul has no effect. This doesn’t seem to cause any issues with IE6 or IE7, fortunately.

I also found that in IE8 as the fadeIn completes, the faded text appears to jump a pixel to the left. This isn’t tragic, but it’s a bit irritating. I found that this only happened if I used the fadeIn method. If I fade in by using .animate() to change the opacity, then the jump goes away.

You can see the final result here if you’re interested.