mIRC Home    About    Download    Register    News    Help

Print Thread
Page 1 of 2 1 2
#166139 07/12/06 01:34 AM
Joined: Oct 2004
Posts: 8,330
Riamus2 Offline OP
Hoopy frood
OP Offline
Hoopy frood
Joined: Oct 2004
Posts: 8,330
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.


Invision Support
#Invision on irc.irchighway.net
Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
Code:
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNGGGGGGGGGGGGGGGGGGGGGGGGGGGG


Just testing..

-genius_at_work

Joined: Dec 2002
Posts: 2,962
S
Hoopy frood
Offline
Hoopy frood
S
Joined: Dec 2002
Posts: 2,962
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.


Spelling mistakes, grammatical errors, and stupid comments are intentional.
Joined: Jul 2003
Posts: 655
Fjord artisan
Offline
Fjord artisan
Joined: Jul 2003
Posts: 655
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.


"Allen is having a small problem and needs help adjusting his attitude" - Flutterby
Om3n #166151 07/12/06 03:18 AM
Joined: Dec 2002
Posts: 2,962
S
Hoopy frood
Offline
Hoopy frood
S
Joined: Dec 2002
Posts: 2,962
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>


Spelling mistakes, grammatical errors, and stupid comments are intentional.
Joined: Jul 2003
Posts: 655
Fjord artisan
Offline
Fjord artisan
Joined: Jul 2003
Posts: 655
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)


"Allen is having a small problem and needs help adjusting his attitude" - Flutterby
Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
Another test post

Code:
Testing code tags


Testing

-genius_at_work

Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
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).

Code:
<style type="text/css">
<!--
.ubbcode-block {
margin: 5px 2em;
background: #FFF;
border: 1px solid #AAAA11;
padding: 0px;
border-spacing: 0px;
}
.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;
//width: 100%;     //CHANGED HERE//
max-width: 100%; 
display: block;
max-height: 300px; 
overflow: auto; 
font-size: 10pt;
}
//-->
</style>

<div class="ubbcode-block"><div class="ubbcode-header">Code:</div><div class="ubbcode-body ubbcode-pre"><pre>

####
INSERT MANY LONG LINES HERE
####

</pre></div></div>


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

Joined: Dec 2002
Posts: 329
Fjord artisan
Offline
Fjord artisan
Joined: Dec 2002
Posts: 329
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.

Joined: Oct 2004
Posts: 8,330
Riamus2 Offline OP
Hoopy frood
OP Offline
Hoopy frood
Joined: Oct 2004
Posts: 8,330
Originally Posted By: starbucks_mafia
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.


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.


Invision Support
#Invision on irc.irchighway.net
Krejt #166192 07/12/06 03:26 PM
Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
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

Joined: Oct 2004
Posts: 8,330
Riamus2 Offline OP
Hoopy frood
OP Offline
Hoopy frood
Joined: Oct 2004
Posts: 8,330
Originally Posted By: genius_at_work
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.


Invision Support
#Invision on irc.irchighway.net
Joined: Dec 2002
Posts: 2,962
S
Hoopy frood
Offline
Hoopy frood
S
Joined: Dec 2002
Posts: 2,962
Quote:
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.


Spelling mistakes, grammatical errors, and stupid comments are intentional.
Joined: Oct 2004
Posts: 73
M
Babel fish
Offline
Babel fish
M
Joined: Oct 2004
Posts: 73
yes, I've seen good forums that display the code either in scrollable fixed-width divs or readonly textareas

Joined: Oct 2004
Posts: 8,330
Riamus2 Offline OP
Hoopy frood
OP Offline
Hoopy frood
Joined: Oct 2004
Posts: 8,330
Originally Posted By: starbucks_mafia
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.


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


Invision Support
#Invision on irc.irchighway.net
Joined: Jul 2003
Posts: 655
Fjord artisan
Offline
Fjord artisan
Joined: Jul 2003
Posts: 655
*wonders how anybody could read the forums with the 'mirc' theme*


"Allen is having a small problem and needs help adjusting his attitude" - Flutterby
Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
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

Joined: Dec 2002
Posts: 329
Fjord artisan
Offline
Fjord artisan
Joined: Dec 2002
Posts: 329
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.

Krejt #166297 08/12/06 10:32 PM
Joined: Oct 2004
Posts: 8,330
Riamus2 Offline OP
Hoopy frood
OP Offline
Hoopy frood
Joined: Oct 2004
Posts: 8,330
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.


Invision Support
#Invision on irc.irchighway.net
Krejt #166314 09/12/06 06:14 AM
Joined: Oct 2005
Posts: 1,741
G
Hoopy frood
Offline
Hoopy frood
G
Joined: Oct 2005
Posts: 1,741
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

Page 1 of 2 1 2

Link Copied to Clipboard