Firefox cuts off right hand side by 1px

[nolanhergert]

I am noticing that in Firefox Ubuntu the div.inner_cell is a few pixels too short, cutting off the end of the row of words and is visually distracting. I notice that other notebooks (from other books) don't have this issue, even though they seem to share the same .css files! But, your font is different than the linked example, so something must be different when you compile it. I can't tell from a first glance of the HTML what is different though.

Looks like a great book otherwise. Gotta tear into it :)

[rlabbe]

I've seen the same thing in Chrome in all the notebooks. This just started happening since the release of IPython 3.0.0 (I think). I haven't had a chance to look into it, but will now.

[pquentin]

The issue itself is quite simple, but it's easy to get confused amidst all the divs and CSS rules. A notebook is a collection of .cell, each one containing a .prompt on the left and an .inner_cell on the right (the actual content). (This is done with flex instead of the usual floats, but this is not relevant here.)

Each .cell has a width of 850px, and each .prompt has a width of... 14ex (126px in my browser, but this is font-size dependant). That leaves 724px for the .inner_cell. But each .inner_cell has a width of 750px (defined in .text_cell_render, their child)! With normal CSS rules, the remaining 26px should overflow on the right, but a recent IPython commit added this:

@-moz-document url-prefix() {
  div.inner_cell {
    overflow-x: hidden;
  }
}

This is the reason why the bug is Firefox-only. rlabbe, you say you've seen this elsewhere, but if this is true, it's probably another bug. Anyway, to fix the issue, you can either:

1. remove the 750px width on .text_cell_render: this will reduce the text width to respect the global 850px limit
2. or remove the 850px width on .cell: this will make the text wider than intended, as it is displayed in Chrome right now, and as it was displayed in Firefox before IPython 3.1.

I can send a pull request if you wish. Thanks!

[rlabbe]

I've made this change and it works. Thank you for your detailed description; I know about nothing about CSS.

[rlabbe]

Hmm, removing the width made all the heading center themselves. No idea why, or inclination to debug. I've reduced the 750 to 740 and it seems to be working. Just pushed to github. I'll reopen and try to get it right if anyone reports further problems