Scrolling code boxes?

[JJoe]

Maybe just for the horizontal?


BTW, somebody should probably unedit something.

[ProxRocks]

(Jun. 12, 2009 05:35 PM)JJoe Wrote:  BTW, somebody should probably unedit something.

done did...
my bad, wasn't thinkin' too clearly...

[Kye-U]

Testing:

Code:

GET http://dsc03.taobao.com/i3/121/531/12d53e5197b5df51f6d06c5abd160535/T1cUVgXg6870JXXXXX.desc|var^desc;sign^61defec1cde8a714e157075bf8731f8d;lang^gbk;t^1240449428 HTTP/1.1
Accept: */*
Referer: http://item.taobao.com/auction/item_detail-0db1-12d53e5197b5df51f6d06c5abd160535.htm
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: dsc03.taobao.com
Proxy-Connection: Keep-Alive
Cookie: wd=12d53e5197b5df51f6d06c5abd160535_0db1; cookie2=ed67ee2d336a91440dd84eb3a0682594; t=a38a112cd02737bd7a79820f04adf41c; uc1=cookie14=UoM%2F0ugJxSsIHA%3D%3D

HTTP/1.1 302 Redirect
Content-Length: 0
Connection: close
Location: http://dsc03.taobao.com/i3/121/531/12d53e5197b5df51f6d06c5abd160535/T1cUVgXg6870JXXXXX.desc|var^desc;sign^61defec1cde8a714e157075bf8731f8d;lang^gbk;t^1240449428

EDIT: Displays properly in IE 8 (and other browsers: Firefox, Opera 10 Beta, Opera 9.64, Chromium). ProxRocks, does it display properly for you?

I notice that Opera 10 Beta automatically inserts linebreaks, whereas in all of the other browsers, it's just wrapped properly.

EDIT 2: Replaced test with actual code block that produces the problem.

[JJoe]

(Jun. 12, 2009 11:21 PM)Kye-U Wrote:  EDIT: Displays properly in IE 8 (and other browsers: Firefox, Opera 10 Beta, Opera 9.64, Chromium).

IE6 on Win98se
Shows vertical bars at the end of the test lines.
Background and framing for boxes is odd.
The horizontal scroll is missing from sidki's post.

I can't remember the last time I used IE6 here, tho.
Could have already been this way.

Have you seen
http://mods.mybboard.net/view-resource/s...-howto..,-

[ProxRocks]

(Jun. 12, 2009 11:21 PM)Kye-U Wrote:  ProxRocks, does it display properly for you?

the post above is displaying fine...
but using the SocketSniff/Maxthon post as a test still has it hanging off the right edge, as JJoe also indicates...

[JJoe]

(Jun. 12, 2009 11:14 PM)ProxRocks Wrote:  my bad, wasn't thinkin' too clearly...

Don't swing too far the other way.
Administrators have responsibilities.
I'm just not sure that those responsibilities include editing other Administrator's posts.

We can't see each others' lives either.
It might not matter too much next week, month, or year.

Gotta go

BTW, shouldn't "you're not using" be 'you are using'?

[Kye-U]

I've tried to address the odd background and framing problem, as well as the overflow for horizontal scrolling. I don't have IE 6 on any of my computers, so I have no way of testing my fixes until I get to work next Monday

[JJoe]

(Jun. 13, 2009 02:26 AM)Kye-U Wrote:  I've tried to address the odd background and framing problem,

These two appear to be fixed.
Scroll is still missing.
Get some sleep.

I may be unavailable Saturday.
If so, very tired and sore on Sunday.
Farmwork.

Have fun

[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.

[sidki3003]

Maybe IE's conditional comments could help?

No other browser but IE:

Code:

<!--[if IE]>
<style type="text/css">/* ... */</style>
<![endif]-->

Only IE older than v7: <!--[if lt IE 7]>

[Kye-U]

Thanks Graycode!

I changed it to:

Code:

.codeblock code {
    width: 800px;
    max-width: 800px;
    overflow: auto;
    height: auto;
    white-space: nowrap;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}
/* IE6 Only (Credit: Greycode) */
/* http://prxbx.com/forums/showthread.php?tid=1408 */
* html .codeblock code {
    overflow: scroll;
}

Works fine here (at work; XP with IE 6) Can others confirm this?

EDIT: I also changed the width of the code block from fluid (100%) to be fixed (800 + 10 padding = 810px).

[ProxRocks]

(Jun. 15, 2009 02:51 PM)Kye-U Wrote:  Can others confirm this?

EDIT: I also changed the width of the code block from fluid (100%) to be fixed (800 + 10 padding = 810px).

awesome!...
works here - WinXP, IE8-shell, screen-res at 1024x768 (cheap monitor, cursed it be, lol [i usually never have to worry about scrolling at home, larger monitors and higher res])...

[Graycode]

Thanks very much, but definitely no need to put credit in the CSS comments. I'm just trying to help a bit like many others.

A difference is that most of my changes were applied to the .codeblock { section while yours are to the .codeblock code {. I'd tried a few variants your way but couldn't find a decent combination, which you did by setting a width to 810.

One quirk of that is where Firefox doesn't put a scroll bar on a wide one-liner. It just cuts off the visible portion prematurely. An example is: http://prxbx.com/forums/showthread.php?t...2#pid12652
I think that's one case that caused me to try applying the styles to the section of .codeblock {, which will include the "code:" heading, so that Firefox would always have its multiple lines.

Things look much better now. That Firefox one-liner situation probably doesn't happen very often, maybe it's not critical, or maybe there's some other / better way to resolve it.

[JJoe]

(Jun. 15, 2009 05:06 PM)Graycode Wrote:  One quirk of that is where Firefox doesn't put a scroll bar on a wide one-liner. It just cuts off the visible portion prematurely. An example is: http://prxbx.com/forums/showthread.php?t...2#pid12652

I do have a scroll bar there with K-Meleon 1.5.3 and Firefox (1&3).
Has this been fixed since Graycode's post?

Looks ok in IE6.

[Kye-U]

(Jun. 15, 2009 05:47 PM)JJoe Wrote:  

(Jun. 15, 2009 05:06 PM)Graycode Wrote:  One quirk of that is where Firefox doesn't put a scroll bar on a wide one-liner. It just cuts off the visible portion prematurely. An example is: http://prxbx.com/forums/showthread.php?t...2#pid12652

I do have a scroll bar there with K-Meleon 1.5.3 and Firefox (1&3).
Has this been fixed since Graycode's post?

Looks ok in IE6.

Nope, I didn't touch anything after Graycode posted @ 1:06pm =]