Google Prettify Line numbers and Overflow

Question

When adding overflow to Google prettify elements, the line numbers disappear.

Unchanged CSS:

pre
{    
    font-size:11px;
    background-color:white;
}
/* Alternate shading for lines */     li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee; width:200%;}

CSS & IMAGE BEFORE:

pre.prettyprint { padding: 2px; border: 1px solid #888;}

enter image description here

CSS & IMAGE AFTER:

pre.prettyprint { padding: 2px; border: 1px solid #888; overflow:auto;}

enter image description here

On what browser does this occur, and does it occur when you replace `overflow` with [`overflow-y`](https://developer.mozilla.org/en-US/docs/CSS/overflow-y)? — Mike Samuel, Oct 15 '12 at 20:01
@MikeSamuel - Thanks for your reply. I've tried with Chrome, Firefox and Safari (no access to IE atm). I've also changed the overflow to overflow-y - same issue on all browsers. — Dan Bough, Oct 16 '12 at 00:18

score 1 · Answer 1 · answered Oct 16 '12 at 00:33

Apparently the numbers were in the padding of the pre.prettyprint element. If I increase the left padding to 30px with the overflow 'on', I can see the numbers. I'll have to comb over the CSS some more (it was inherited)

CSS change & the resulting output:

pre.prettyprint { padding-left:30px; border: 1px solid #888; overflow: auto;}

enter image description here

Google Prettify Line numbers and Overflow

1 Answers1