Qbasicnews.com

Full Version: QB Express Celebrates One Year: Issue #12 Released
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6
There's no indentation in IE.

I would do this, which could work in all browsers: Create a style for div which uses a monospaced font, and the overflow = auto and stuff, and then write a little parser in fB which turns spaces into &nbsp;'s and that adds a <br> at the end of each line. That way you won't need <pre> and it will get rendered correctly in both IE and FF (gray boxes aside, which are after all a bug which will be fixed anytime soon).

The code is still usable as copying from the browser then pasting to notepad or whatever gives spaces and line feeds correctly.

I'm checking it out with FF right now from a Linux box and the code boxes look ugly 'cause it's using 8 spaces per tab and I used 4, for example, thus the indentation gets garbled. A simple program which substitutes spaces by &nbsp;'s and tabs by &nbsp;&nbsp;&nbsp;&nbsp; would work nice, I think. Most people use 3 or 4 spaces for indenting. Also, using this smaller tab jumps would solve the issue of hyper-horizontal code snippets Tongue

This seems to work. The CSS bit is something in the lines of:

Code:
#codebox {
            overflow:         auto;
            font-family:         monospace, courier;
            font-size:         12px;
            background-color:     #ccccff;
            color:             black;
            border:         1px solid black;
            margin-left:         auto;
            margin-right:         auto;
            width:            600px;
        }

And the <div> containing the code snippet looks something like this:

Code:
<div id='codebox'>For&nbsp;i&nbsp;=&nbsp;0&nbsp;To&nbsp;255<br>
&nbsp;&nbsp;&nbsp;&nbsp;Get&nbsp;#1,&nbsp;,&nbsp;myDatum<br>
&nbsp;&nbsp;&nbsp;&nbsp;myDatum&nbsp;=&nbsp;myDatum&nbsp;*&nbsp;2<br>
&nbsp;&nbsp;&nbsp;&nbsp;For&nbsp;j&nbsp;=&nbsp;0&nbsp;To&nbsp;127<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Print&nbsp;averageData&nbsp;(myDatum,&nbsp;j)<br>
Next&nbsp;j&nbsp;</div>

It's ugly but it works. And the fB program to "translate" spaces to &nbsp;'s, tabs to 4*&nbsp;'s and linefeeds as <br>'s is quite easy to code Wink
Adigun: I fixed the formatting problem. Thanks for letting me know!


rpgfan: The overflow: auto is so that code boxes can scroll to the right if the width of the code exceeds the box. This is necessary because otherwise the layout would get messed up.


Na_th_an: I appreciate your suggestion, man. You're right, it would fix the problem. However, I'm not sure I want to implement it because of how much manual labor it would entail... copying and pasting dozens of code blocks every issue. I think there's got to be an easier way.

I actually tried using this solution in the past, before I started using the overflow: auto method. (I quit doing it because it took way too long.)

Look at this code box from some of the earlier issues... DarkDread's tutorial from Issue #3 is a good example:

Code:
<blockquote class="code"><font face="Courier" size="-1">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF PlayerDir$ = "E" THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 3, PlayerY% - 1) > 9 AND Map%(PlayerX% + 2, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T3.BSG", Cell3LeftX, CellY, 0<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 2, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW3.BSG", Cell3LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 2, PlayerY% - 1) > 9 AND Map%(PlayerX% + 1, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T2.BSG", Cell2LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 1, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW2.BSG", Cell2LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 1, PlayerY% - 1) > 9 AND Map%(PlayerX%, PlayerY% - 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T1.BSG", Cell1LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX%, PlayerY% - 1) > 9 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "LW1.BSG", Cell1LeftX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END IF<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IF Map%(PlayerX% + 3, PlayerY% + 1) > 9 AND Map%(PlayerX% + 2, PlayerY% + 1) < 10 THEN<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PutSprite "T3.BSG", Cell3RightX, CellY, 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELSEIF Map%(PlayerX% + 2, PlayerY% + 1) > 9 THEN<br>


...and so on.

I'm not trying to blow off your solution, I just can't justify all the time it would take. (Call me lazy. Tongue)

My theory at the moment is that FireFox has some kind of conflict with having a <div> tag (with overflow: auto) within a <pre> tag... but when I reverse the order of these tags, vertical scroll bars begin to appear (and we don't want those, only horizontal ones).

There's got to be some simple CSS fix that will alleviate all of our problems, but I haven't found it yet.
I've noticed that www.ubuntuguide.org has the same problems (gray boxes)... we should get together a group of angry people with pitchforks and march on the Firefox headquarters. Wink I think we have enough reproducible examples to show that there is a bug in the rendering engine.
i noticed another bug too :evil:
you never closed the <a> at <a name="fbprinting">, meaning that for the first part of my article, the text background changes color when you hover your cursor over it :o
To me the #1 problem is that code boxes don't have indentation in IE. Problem #2 that in FF the tab size is too big (8 chars).

The gray boxes isn't your fault, so I'd rather wait unti the bug is fixed. After all, you can always press the middle button.
Edit: The overflow isn't good for the PRE element either, or the BLOCKQUOTE for that matter. . . It could just be the DIV inside the PRE, but. . .
Since it is being stubborn, I'm going to try to recreate the QBE #12 page on my own. Maybe I can figure out why it happens, though I doubt it will help.

Edit: For those who don't know, an update to Firefox was released a couple of days ago. Unfortunately, the Mozilla Foundation still hasn't been able to fix the bug.

Edit (will I ever stop?): Netscape 7.2 (based on Mozilla) shows the box as well. Netscape 8 is based on Firefox, so it probably displays the bug as well. . .
Dang, I missed it.

>anarky
Quote:I've noticed that www.ubuntuguide.org has the same problems (gray boxes)... we should get together a group of angry people with pitchforks and march on the Firefox headquarters. Wink I think we have enough reproducible examples to show that there is a bug in the rendering engine.

I checked out UbuntuGuide.org to see how they do their code boxes, and sure enough, they're also using <pre> with the overflow: auto; attribute. That's got to be what's causing the gray boxes in FireFox.

So....everyone send Mozilla error reports so that they'll fix this with the next version!


Quote:To me the #1 problem is that code boxes don't have indentation in IE.

Great point! I've always been so concerned about the gray boxes that I neglected fixing indenting with IE...which is just as important a problem, and easily fixable.

I just came up with a simple CSS fix that will display indented code properly in IE. I'm going to implement it into issue #12 and see if anyone has problems with it, and if not, I'll add the fix to all the issues.


Quote:Problem #2 that in FF the tab size is too big (8 chars).

Another point taken. How do you set it lower? I wasn't aware that you could do that with CSS.


Quote:The gray boxes isn't your fault, so I'd rather wait unti the bug is fixed. After all, you can always press the middle button.

The outlash about gray boxes after each issue has kind of boggled my mind, since for me it's so easy to work around.

99% of the time for me, they disappear with a single scroll wheel click. Once in a very great while there's a gray box that will only disappear with a reload or by scrolling up and down the page really fast...but I've never had one that wouldn't go away. Maybe this isn't the case for everyone?

If the gray boxes were to always appear at the same place and wouldn't go away no matter what you do, I can see why people would be so angry about it. But in my experience, that's never happened.
Okay Na_th_an, uploaded the IE indenting friendly version. Hope you're happy. Smile
Actually, the gray boxes appear in the same place for me always and don't go away with a middle-click. . . It's probably just my PC though.

As for the tabs, you can't change that with CSS currently as far as I know. I don't think any browsers, even Firefox, have implemented the 'word-spacing' property and I don't think it would resolve it anyway.
Pages: 1 2 3 4 5 6