Scrolling code boxes?

[Graycode]

I used my proxy to make some chages to the content of: prxbx.com/forums/cache/themes/theme5/global.css

I tried using some "100%" values to keep the code block within the window size but could not find a decent multi-browser solution for them. I ended up using an explicit width of 800 pixels. I'm not that good at CSS, there may be better solutions.

First, in the main body definition I commented out the line-height: assignment. It was not terminated with a semicolon, and so the margin: setting was not being properly assigned. My change was to put the /* ... */ surrounding it.

Code:

body {
    background: #92ADC0;
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
    text-align: center;
/* line-height: 1.4 */
    margin:0px;
    padding:0px;
}

Then I removed the previous overflow: auto from the .codeblock code section. My change was to put the /* ... */ surrounding it.

Code:

.codeblock code {
/* overflow: auto; */
    height: auto;
    /*max-height: 200px;*/
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

Next I added attributes for white-space: and width: and max-width: and overflow: to the CSS definition for .codeblock section. They're shown here in upper case just for clarity.

Code:

.codeblock {
WHITE-SPACE: nowrap;
WIDTH: 800px;
MAX-WIDTH: 800px;
OVERFLOW: auto;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0px;
}

I tested those in a few Firefox and Opera versions. They did not fully resolve IE-6 (see below), and I have not tested with any other IE version.

For IE 6 browser only the overflow value needed to be changed from auto into scroll. Otherwise the scroll bars that it used would obscure some of the text being shown. That's illustrated in the attached 'IE6_Problem.gif' (using auto) vs. the 'IE6_Scroll_Fix.gif' (using scroll). So for IE 6 only, the style looks like:

Code:

.codeblock {
white-space: nowrap;
width: 800px;
max-width: 800px;
OVERFLOW: scroll;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0px;
}

My suggestion would be for the forum's CSS to exclude consideration of IE-6. Then anyone with that browser could use Proxo to customize the CSS to suit their particular needs.