I've noticed that if you use the code tags with a wide piece of code, all the messages that you're replying to have the User section (the part where you see the posters' names and # of posts and stuff) is *very* wide, but your own is just wide enough to fit everything. Normally, it's just wide enough to fit everything, but with the code tags (perhaps others, like quote will do this as well), it messes up. This should be an easy PHP fix... the width is probably set to a % value instead of a fixed value.

Can this be fixed? Thanks.

Just testing..

-genius_at_work

What browser are you using? Presumably some version of IE since this is caused by your browser having a bugged box model. If you're using IE6 try upgrading to IE7, it supposedly has much better (although still flawed) standards support.

Or just use any recent version of Firefox/Opera/non-IE browser which will almost certainly work correctly by using scrollbars within the code/quote box instead of requiring horizontal scolling of the entire window and messing up the whole layout.

This definitely shouldn't be "solved" with a fixed width value. Not good design karma.

I am on other forums where quotes and code boxes are automatically given scrollbars when needed, ragardless of the browser type.

I dont think suggesting the use of a non ie browser is at all a solution in a state where 90% of users are using it. (offtopic rant: It is especially aggitating to me when i see a developer tell its users to do just that rather than improve the code)

I have no experience coding forums, but im sure this could be resolved with some relatively minor code adjustments.

As a php developer myself i have to admit that making sure projects are fully multi browser friendly is a total pain in the backside.

I'm sure the issue can be resolved to make it work appropriately with IE, although it might not be reasonably within Tjerk's abilities as a user of the ubbThreads forums to fix this depending on how powerful/flexible ubbThreads' layout system is. It might require a bug report to the ubbThreads developers and another forum update to fix, or at least an ugly Javascript hack.

In any case, the suggestion to upgrade/switch was simply to point out that the bug doesn't occur elsewhere so if people want it fixed right away that's all they need to do. Can anyone confirm this bug occurs in IE7 aswell?

For those not wanting to see an anti-MSIE rant, stop reading.... NOW!

<rant>You're right, it is a complete pain trying to write software that's multi-browser friendly but as this bug demonstrates there is one major reason for that: Internet Explorer. It's not so much a case of having to write code that works in all browsers, it's a case of writing standards compliant code and then creating hacks to make it work on IE. The standards that need to be followed for this bug not to occur have been around for nearly a decade, is it really so much to ask that the largest software company in the world make their browser support it instead of expecting hundreds of thousands of web developers and site admins to work around their mistakes?</rant>

Confirmed, this post was done through a Vista RTM with IE7.0.6 VMWare machine. There is no visual difference between this and IE6.0.2 on my main windows 2000 pc.

And i agree, it is most certainly not too much to ask (maybe fixing it would require them to fix code in there own websites lol)

Another test post



Testing

-genius_at_work

I messed around with the forum stylesheet, and I discovered that the problem seems to be that IE requires the width of the <div> to be specified in order for the scroll bars to appear.

If you paste this code into a .html file, and then view the file with IE and FF, you should see the scroll bars in IE (where they weren't before).



Notice the modification marked in the ubbcode-body definition. I've never used UBB forums before, so I don't know how hard it would be to modify the style sheet template. The // before the style should allow compliant browsers to continue working properly.

-genius_at_work

I can easily edit the stylesheets used on the board,
to change colors etc, but I only have little clue
about re-designing them.

Simply adding the //width: 100%; line to the
ubbcode-body properties doesn't seem to do the
trick (see the current stylesheet). What do I miss?

Tjerk.

I'm using IE7. And apparently it's a width issue for div.

Krejt, if you can find where that side box is located (the one where the names are) in the style sheets, the best thing would probably be to set a fixed width that isn't too big instead of a percent width. If that doesn't work, then I'm not sure. I've only edited PHPBB forum coding, so I don't know anything about UBB coding.

The problem seems to be that none of the containers on the forum (<div> and <span>) are fixed width. IE doesn't seem to understand that 100% is the width of the browser window.

I'll look into this more when I get home from work.

-genius_at_work

I don't think that is quite the issue. The code tags make the width greater than 100%. Now... if that's not supposed to happen and you're supposed to just scroll horizontally in code tags (it made it over 100% in the old forum format as well), then that's an issue with the code tag format. But, if the code tags are supposed to be allowed to increase the width of the messages, then it's an issue with the left "cell" that contains the poster names.

Here is what I think is happening.

Poster Cell = 20% (example... I didn't try to find out what it really is)
Message Cell = 100% (this makes the message cell the remaining width to fit the window).

That would work fine... until the code tag increases the width of the table. If the table is suddenly 200% because of a code tag, then that poster cell is 2 times as large as it was originally because 20% of 200% is bigger than 20% of 100%.

The fix that I think would be best would be to set the poster name cell to a fixed width instead of a percentage. The other option that I can see, though I wouldn't like it as much, is to prevent the code tags from being wider than the screen size and make users scroll horizontally on long lines.

That's the way it's meant to be (as it shows on other browsers). Why wouldn't you like to see it? If the code tags are wider than the page you'll have to scroll horizontally anyway, so why not make it happen within the code box and preserve the readability of the rest of the page. With the old forum's behaviour, if one person posted long code it made every post in the thread frustrating to read.

yes, I've seen good forums that display the code either in scrollable fixed-width divs or readonly textareas

Heh, when I read that, I realized that I wasn't thinking about it correctly. I wasn't thinking about how it would really look with it set up to be screen-width code tags. I agree that it would look better that way. So, just need to make the code tags work correctly in IE. I know many people hate IE with a passion, but the fact is that the majority of people still use it and it is best to make things work for the majority of people whenever possible.

*wonders how anybody could read the forums with the 'mirc' theme*

I couldn't find an 'ideal' solution to this problem. The simplest solution I found was to set a fixed width (ie 500px) for one of the containers. The other solution is to use an IE 'hack' which sets a fixed width that depends on the screen width. Like I said, neither solution is really ideal.

-genius_at_work

I changed the .ubbcode-body Class to contain a //width: 500px; setting, but that has some odd side-effect when a scroll-bar is added ... See the one line test above; the text is covered by the scroll-bar! Any idea g\how to solve that? A min-height setting doesn't seem to help... (Hey, don't laugh - I really have no clue what I'm doing)

Tjerk.

It looks like the "ubbcode-body ubbcode-pre" class is the one that may need work. I can't see the class, so I'm not sure what could be done with it. I will say that the code width is not as wide as the code box, so that should also be fixed.

Try these settings:

.ubbcode-block {
margin: 5px 2em;
background: #FFF;
border: 1px solid #AAAA11;
padding: 0px;
border-spacing: 0px;
//width: expression(document.body.clientWidth * 7 / 11);
//overflow: auto;
}
.ubbcode-header {
display: block;
font-weight: bold;
padding: 4px;
color: #666666;
background: #EEEECC;
border-bottom: 1px solid #AAAA11;
font-size: 8pt;
}
.ubbcode-body {
margin: 4px;
max-width: 100%;
max-height: 300px;
font-size: 10pt;
display: block;
overflow: auto;
}

-genius_at_work

Ah, that's better, but not perfect yet.

There still is a problem due to the fact that IE renders the horizontal scrollbar inside the space alotted for the block. A similar problem for images is discussed here http://www.thescripts.com/forum/thread567473.html and there seems to be a solution here;
http://www.oreillynet.com/pub/a/javascript/synd/2002/11/15/css_pitfalls.html?page=3

How about this instead:

.ubbcode-block {
margin: 5px 2em;
background: #FFF;
border: 1px solid #AAAA11;
padding: 0px;
border-spacing: 0px;
//width: expression(document.body.clientWidth * 7 / 11);
//overflow-x: auto;
}

-genius_at_work

The scrollbar issue seems to be that it puts the scrollbar into the code box rather than outside of it. I don't know if you can get the scrollbar outside of the code box, but if not, then I think your only real option is to automatically insert 1-2 <br>'s or <p>'s after all code in a code tag. That will give you the necessary height you need.

I don't think just putting a minimum height for the code box will work because the vertical scrollbar may not appear if you have just the right numer of lines for the height of the code box, which will result in the bottom line being hidden by the horizontal scrollbar. I could be wrong about that, though. I don't have UBB to test with.

Nope, that hides the last (or only) line :-)

Here is my latest attempt:

.ubbcode-block {
margin: 5px 2em;
background: #FFF;
border: 1px solid #AAAA11;
padding: 0px;
border-spacing: 0px;
//width: expression(document.body.clientWidth * 7 / 11);
//overflow: auto;
//height: 200px;
}
.ubbcode-header {
display: block;
font-weight: bold;
padding: 4px;
color: #666666;
background: #EEEECC;
border-bottom: 1px solid #AAAA11;
font-size: 8pt;
}
.ubbcode-body {
margin: 4px;
max-width: 100%;
max-height: 300px;
font-size: 10pt;
display: block;
overflow: auto;
}

I was at a point where I almost had it perfect, except I was bouncing back and forth between showing multi-line codes and showing single-line codes. I couldn't get it to show both properly at the same time, so the best I could come up with is to set a fixed height for ALL code windows, regardless of how many lines there are. It looks kinda rediculous to me, but I can't get it any better.

-genius_at_work

Has anyone posted the issue on UBB's forum? Maybe they can fix it themselves and offer a hotfix for it.

Hmm.. I agree that was the last option, but it didn't like the fixed size very much. Thanks for all your help, I learned a lot and we improved it somewhat! I'll point Rick (author of UBBT) to this discussion and ask him to make a solution in UBBT. thanks again,
Tjerk.

From the viewpoint of someone who's wanting to please as many users as possible, you're entirely right, but for the good of the www I think all hugely popular websites should write standards-compliant code without hacks for internet explorer to either make people move or make Microsoft buck up their ideas and fix their damn browser. I imagine someone like Myspace doing this would have a huge impact.