NineChime forum

Furry stuff, oekaki stuff, and other stuff.

You are not logged in.

#1 10-24-2011 20:34:25

rainbow
Member

Chatbox layout distortion issue in IE 5.5 and IE 6.

Hey there! I recall that I upgraded my oekaki site to Wax Poteto 5.8.6 a while back.

When I recently upgraded it, the coding of the chatbox pretty much broke compatibility with Internet Explorer 5.5 and Internet Explorer 6. Since this is my oekaki, it's not supposed to do that. Here's a screenshot: http://img12.imageshack.us/img12/5547/preie7chatbox.png

In the screenshot mentioned above, there is a gap between the header and the chatbox message doesn't even show. I know that IE 5.5 and IE 6 are outdated, but how can I fix this?

I seem to be stuck here. sad

The chatbox layout seems to work correctly in IE7 as well as Firefox 3.

Last edited by rainbow (10-24-2011 20:35:33)

Offline

#2 10-25-2011 07:07:15

Waccoon
Administrator

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

The whole idea of using an iFrame is braindead.  I haven't done any major redesign to the chat room in a long time.  If I remember correctly, switching to a new DOCTYPE declaration fixed a few layout problems with modern browsers but breaks older browsers.  The only way to fix this problem AFAIK is to get rid of the iFrames.  I have a few higher priorities at the moment, so any help is appreciated.

Offline

#3 10-25-2011 11:30:10

rainbow
Member

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

Waccoon wrote:

The whole idea of using an iFrame is braindead.  I haven't done any major redesign to the chat room in a long time.  If I remember correctly, switching to a new DOCTYPE declaration fixed a few layout problems with modern browsers but breaks older browsers.  The only way to fix this problem AFAIK is to get rid of the iFrames.  I have a few higher priorities at the moment, so any help is appreciated.

When I got rid of the iFrames, it only showed the chatbox message panel. In Internet Explorer, it displays a extra space below the chatbox message panel. Other browsers don't have this issue.

The DOCTYPE declaration is found in the common.php and boot.php files and it was first introduced in Internet Explorer 6 and was even backported to IE5.5 via a quirks mode.

What I can do is to e-mail you the files for the chat.php, chatbox.php, boot.php and common.php files if it is possible. There should be a way to come up with hacks that should make the chatbox compatible with legacy browsers. smile

I recall that switching to DOCTYPE occurred in WaxPoteto 5.8.0.

Update: I sent you a e-mail and have you look over the files that I sent to you. Additionally, I'm trying to send you another e-mail on your Comcast account incase your NineChime account thinks that the files that I sent to you is a virus and rejects those files. The only problem is that I'm trying to attach those files, but so far...it's not working right. sad

Last edited by rainbow (10-25-2011 12:46:41)

Offline

#4 10-27-2011 05:10:15

rainbow
Member

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

Um, Wac. I seem to be stuck here as I'm running into a couple of problems here. Here's another screencap: http://img97.imageshack.us/img97/4955/ie556bugs.png

1. In Internet Explorer 5.5, there is a space between the chat conversation box and the message box. The good part is that I got rid of the white space below the text in the message box itself. What's really interesting in IE5.5 is that the scroll bars were coloured.

2. In Internet Explorer 6, the horizontal scroll is even overlapping the message conversation field. Accidentally removing the IE6 hack only made things worse.

I was wondering if there are any CSS hacks that will at least try to fix this bug that probably existed as early as OekakiPoteto 4.x (released in May 2002). I've been looking at websites where they might be fixes and possible hacks for IE5.5 and IE6.

Here's what the message box comment line looks like so far in the chatbox.php file, lines 49 through 73:

Code:

<body <?php echo ' '.$bodydata;?>>

<iframe src="chat.php" name="topFrame" width="100%" height="420" frameborder="0"></iframe>

<form name="form1" method="post" action="chat.php" target="topFrame" onsubmit="setTimeout(&quot;MM_setTextOfTextfield('comment','','')&quot;,10)">
    <table border="0" cellspacing="0" cellpadding="2" align="center" class="header" width="100%">
        <tr>
            <td align="center" style="font-size: 12px">
                <?php if (!empty ($OekakiU) && $guestpost != 'yes') { ?>
                    <?php echo $langop_word_message;?> (<a href="#" onclick="openWindow('niftyusage.php', 500, 300); return false"><?php echo $langop_common_niftytoo;?></a>)
                    <input type="text" name="comment" class="txtinput" size="40" maxlength="64" /> <input type="hidden" name="send" value="Send" />
                    <input type="submit" name="submit" value="Send" class="submit" />

                    <?php if ($cfg['smilies'] != "no") { ?>
                        <a onclick="openWindow('emoticons.php', 320, 320); return false;" href="#" target="topFrame">Emotes</a>&nbsp;|
                    <?php } ?>

                    <a onclick="openWindow('chathelp.php', 500, 240); return false;" href="#" target="topFrame"><?php echo $langop_word_help?></a>&nbsp;|&nbsp;<a href="chat.php" target="topFrame"><?php echo $langop_word_refresh;?></a>
                <?php } else { ?>
                    <b>You must be logged in to use the chatbox.</b>
                <?php } ?>
            </td>
        </tr>
    </table>
</form>

I might have to add more hacks and quirks to get it to work right in IE 5.5 and IE 6. I know that white-spacing in IE5.5 and IE6 (legacy browsers) is a common problem and I'm hoping that there are ways to get the bug corrected. sad

Edit: I remember this post from nearly three years ago. I re-added the hack that eliminated the horizontal scroll bars in IE6. However, I still can't get rid of the white-space between the conversation field and the message comment field box in IE 5.5 and IE 6 without having to fix more and more markups.

Any ideas?

Last edited by rainbow (10-27-2011 05:23:16)

Offline

#5 11-02-2011 16:37:13

rainbow
Member

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

Okay, the chatbox layout distortion issue has been fixed!

Here's what I did after nearly a week of frustration:

1. In lines 142 to 153 of chat.php, I had to insert these lines:

<!-- These hacks are required for the hidden scroll bars and chat conversation layout to work properly in IE 5.5 and IE 6 -->

<!--[if lt IE 7]>
    <style type="text/css">
        display: block;
        html (overflow: hidden)
        body {padding-right: 0px; margin: 0 0 0 0}
        vertical-align: bottom;
    </style>
<![endif]-->

<body <?php echo ' '.$bodydata;?> style="overflow: hidden" scroll="no">

Without this the layout would have been distorted, thus breaking compatibility. The scroll="no" variable only works in Internet Explorer and does not have a effect in other browsers. The conditioning CSS style applies to IE 6 and below.

2. In the unmodified version of the chatbox.php file, lines 49 through 52 show that the IFRAME tag was inserted before the FORM tag causing white-spacing issues in versions of Internet Explorer 6 and below:

<iframe src="chat.php" name="topFrame" width="100%" height="340" frameborder="0"></iframe>

<form name="form1" method="post" action="chat.php" target="topFrame" onsubmit="setTimeout(&quot;MM_setTextOfTextfield('comment','','')&quot;,10)">

To correct this, I had to relocate the IFRAME tag and place it after the FORM tag as described below in lines 48 through 52 of the same file:

<form name="form1" method="post" action="chat.php" target="topFrame" onsubmit="setTimeout(&quot;MM_setTextOfTextfield('comment','','')&quot;,10)">

    <!-- To prevent whitespacing in IE 5.5 and IE 6, the IFRAME tag must be inserted after the FORM tag.-->

    <iframe src="chat.php" name="topFrame" width="100%" height=488" frameborder="0"></iframe>

I also had to do a bit of tweaking in the footer part of the chatbox. And when I was all finished, I tested the chatbox in IE6 and it crashed referencing to MSHTML.DLL so, I had to place a older version of the file and it worked okay.

This was also tested in IE 5.5 and it worked as well. smile

Offline

#6 11-03-2011 03:34:15

Waccoon
Administrator

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

Shouldn't that be:

Code:

<!--[if lt IE 7]>
    <style type="text/css">
        * {
                display: block;
                vertical-align: bottom;
        }
        html {overflow: hidden;}
        body {padding-right: 0px; margin: 0 0 0 0;}
    </style>
<![endif]-->

I just downloaded standalone versions of IE 5.5 and 6.0.  I'll give them a try.

To correct this, I had to relocate the IFRAME tag and place it after the FORM tag

I'm not sure that will work as intended, because the iframe is not part of the form.  I have no idea how form fields interact between frames, so this might be a problem waiting to happen.

Most likely the correct way to fix this is with a collapseable margin, though I can only find a CSS property that affects tables, not blocks.

Offline

#7 11-03-2011 06:13:37

rainbow
Member

Re: Chatbox layout distortion issue in IE 5.5 and IE 6.

Waccoon wrote:

Shouldn't that be:

Code:

<!--[if lt IE 7]>
    <style type="text/css">
        * {
                display: block;
                vertical-align: bottom;
        }
        html {overflow: hidden;}
        body {padding-right: 0px; margin: 0 0 0 0;}
    </style>
<![endif]-->

I just downloaded standalone versions of IE 5.5 and 6.0.  I'll give them a try.

To correct this, I had to relocate the IFRAME tag and place it after the FORM tag

I'm not sure that will work as intended, because the iframe is not part of the form.  I have no idea how form fields interact between frames, so this might be a problem waiting to happen.

Most likely the correct way to fix this is with a collapseable margin, though I can only find a CSS property that affects tables, not blocks.

I attempted to add the code in the chat.php file and it messed up the layout of the chat in IE 6. I had to revert it as is...according to my previous comment. And as for the IFRAME and FORM tags, I knew that it doesn't work too well.

And as for collapsible margin with a CSS property that affects tables, I'll figure a way out soon. (:

Offline

Board footer

Yep, still running PunBB
© Copyright 2002–2008 PunBB