The root cause of the problem turned out that to be that some lines within <pre><code> where too long, and on a browser like firefox, it was overflowing on the right, not too appealing, but not such a big deal. But on Internal explorer, it ended moving the main <div>. Ouch!
I thought the solution would just be to add an
overflow: scroll;
to the <pre> element. Hmmm, not quite. Let’s try the <code> element. Hmmm, neither! Works great with firefox though.
After much research, I found the solution on Site Surgeon and I’m grateful!
The key I was missing is to force the width to almost 100%:
width: 99.5%; /* force IE to display the scrollbars */
overflow: scroll; /* Create horizontal and vertical scrollbars. */
An other interesting nugget is to treat the <code> element as a block to be able to set a vertical margin and vertical padding.
For those of you that use Explorer, please accept my apologies. And thank you for reporting the problem!
It’s almost comical with IE these days. How many times i’ve said, “Except in internet explorer” in the last six months… Oh maybe 1000? :)