If you write some code on one line which is too long for the code block to display in one, it usually, if I remember correctly, would just add a scroll bar to the bottom. Seemingly this has changed as now the code block will still display the scroll bar, but will also add a lot of extra space below. Am I right in thinking that this isn't how it should be? See below


If that looks normal to people, this is what it looks like to me!

enter image description here

  • 2
    Which browser(s) do you see this on? It looks perfectly normal to me using Firefox 4, so this is probably a bug specific to your browser.
    – sepp2k
    May 26 '11 at 11:05
  • 3
    Are you using IE 8? It doesn't look this way in Chrome or Firefox.
    – Cody Gray
    May 26 '11 at 11:07
  • No repro with the FF5 Beta. I can't remember seeing such a thing back in FF4 or FF3.6 either. May 26 '11 at 11:08
  • 6
    Yes, I see the same in IE8.
    – axtavt
    May 26 '11 at 11:14
  • Wow, the Firefox 5 beta is already out? They haven't even fixed all the minor bugs in 4 yet. I can't see how it's time for another major release.
    – Cody Gray
    May 26 '11 at 11:26
  • 2
    Well I was using IE8, but it was working in IE8 only a few days ago. May 26 '11 at 11:46
  • 1
    @Yi Jiang - No, IE8 browser mode and IE8 standards doc mode. May 26 '11 at 12:27
  • 2
    Same repro on IE8, also not in compatibility mode.
    – Grace Note StaffMod
    May 26 '11 at 12:28
  • 1
    Actually just checking and it is actually the css max-height:600px that causes this. Has this been changed recently? Because you remove the max-height and it displays correctly. So I do a quick search and I find this SO question: stackoverflow.com/questions/7707/… This makes sense but doesn't explain how it displayed correctly a few days ago. May 26 '11 at 12:34
  • 1
    Repro on IE8. This started today. That code I posted yesterday was fine yesterday.
    – GSerg
    May 26 '11 at 13:04
  • 3
    This is what happened. So much fur IE8 not being broken anymore :\
    – balpha
    May 26 '11 at 13:57
  • 1
    @balpha - So it was a change on the SO side. I'd prefer the big wall of text if it was a straight choice between big wall of text for long code blocks and big code block for small pieces of code. There must be a solution that can accomodate both on IE8. May 26 '11 at 14:00
  • 1
    @anothershrubery: I didn't say I want to keep it this way, and I'm trying to find solutions already. Unfortunately that's not easy with an utterly broken browser.
    – balpha
    May 26 '11 at 14:05
  • 1
    I have so far drawn six narwhals in that big wide open canvas. Six. The supercollider freehand-circle script has failed me for the last time!!!
    – user1228
    May 26 '11 at 15:01
  • 1
    @Wont Get thee to a place whence ye may post a bug report. eth.
    – Pollyanna
    May 26 '11 at 17:23

Unfortunately the eighth incarnation of a certain browser from Redmond has issues with max-height in conjunction with overflow: auto – under certain circumstances, it causes the issue you see. Until recently we had disabled max-height on IE8 (because of a different issue that seems since fixed).

So we can either put that hack back in, causing giant walls of text again, or not do it, and cause Narwhal aquariums.

Or… why not try an even uglier hack!

After some testing, I found that giving the max-height to the element inside the <pre>, and not to the <pre> itself, actually works.

However, this means that a) we need a wrapper element inside the <pre>, and b) that wrapper needs to be display: block (and overflow: visible, but that's default). And we're certainly not rebuilding the HTML of every post ever made to work around an IE8 bug.

Fortunately, any Markdown-created codeblock (i.e. 4-space indent) does have that wrapper: Codeblocks are always <pre><code>. So we can do something at least for those blocks (which obviously are the vast majority).

Unfortunately, this may break when someone writes their own HTML like this:


– but I'm making the assumption that no-one does that.

The best thing would be to apply this CSS hack only to <pre><code>...</code></pre>, but unfortunately IE8 doesn't support the pre > code:only-child-not-even-any-text-node-siblings selector, so the best we can do is :first-child.

This will be in the CSS after the next build:

.post-text pre > code:first-child
    max-height: 600px\9;
.post-text pre
    max-height: none\9;

This is ugly as hell, and it causes my contrived example above to break (it grows a newline), but I'm willing to give it a try, since it fixes a majority of these cases.

The weird \9 thingadongdongs are a browser hack to make these rules only count in IE8, so other browsers aren't impacted by this.

If it causes other issues again, I'm afraid we have to go back to the giant walls of text.

  • So the example in the question should look ok if I refresh? Because it doesn't. Or should I just see an improvement in posts created after right now? May 26 '11 at 20:07
  • @KateGregory: Note the "after the next build" in my post. You'll have to wait until we deploy next time; try again tomorrow.
    – balpha
    May 26 '11 at 20:09
  • 1
    "If it causes other issues again, I'm afraid we have to go back to the giant walls of text." -- no. More hacking is always the solution.
    – Jon Seigel
    May 27 '11 at 3:47
  • Post preview seems to remain not fixed.
    – GSerg
    May 27 '11 at 17:54
  • @GSerg: Yep, forgot the preview.
    – balpha
    May 28 '11 at 12:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .