I have been trying to get code blocks to display nicely while using the SubText's Origami skin and was having some problems.
Below is the sort of rendering I was getting (ignore the text it's made up).
There were a few issues.
- for long code lines the ends of the lines were lost beyond the right margin
- also the block's shadow wasn't correctly aligned
- the code blocks were floated left and caused the subsequent paragraph to display inline - something I wanted to avoid
To fix this I made some changes to Origami's core.css file.
The first change was to add clear:left to any <p> blocks immediately following .dropshadow blocks (if, like me, you didn't know about the plus sign operator, that's what it does). This ensures nothing can float to the left of the <p> block. Next I added overflow:auto to the definition of .innerbox so that long code lines stayed within the block and scrollbars appeared when required. Both .dropdown and .innerbox are defined in _System/commonstyle.css.
My code blocks display fine now.
