NineChime forum

rainbow · 10-29-2008 00:07:09

I've just recently completed the design of my oekaki site.

However, I'm having a problem with the layout of the Wax Poteto chatbox and it only involves a page rendering issue under Internet Explorer 6 and 7.

I have included three screenshots of the chat under different browsers: Firefox 3, Internet Explorer 7 and Internet Explorer 6 (under Windows 98 SE Virtual PC guest).

Under Firefox 3, the layout of the chatbox, including the message box header (including page navigation and the time) and message comment box all remain perfectly intact.

However, under Internet Explorer 6, there are problems. I've noticed a horizontal scroll bar that causes the message box header and the conversation box to stretch, plus there is a big gap that causes the message comment field to be nearly hidden.

But under Internet Explorer 7, the message box header and chat conversation box remain perfect, but the gap remains on the message comment box.

With the exception of fixing the message comment field on the bottom, I tried so hard to get it all perfect under Internet Explorer 6 and 7, but I couldn't do it.

I used my modified chat.php and chatbox.php files, btw and the chatbox does function as usual. But is there a way to fix the layout issue of the chatbox under Internet Explorer 6 and 7?

(If you don't mind, I can try to send you the chat.php and chatbox.php files to look over the problem if you want.)

Waccoon · 10-30-2008 04:21:05

OK, first things first. You need to fix the markup. If the markup is broken, every browser will behave unpredictably.

Do a "view source" of your document, and you'll see that the document is not terminated correctly. Make sure all your DIVs and the main body are closed.

Also, you are missing some assignments. Replace all references of target"topFrame" with target="topFrame", and so on.

Also keep in mind that CSS should be in the document header. Your IE specific code...

Code:

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

...should be within the header tags, either before or after the main CSS, depending on what behavior you are trying to modify...

Code:

        ...
    }
    .commentpost {
        background-color: #000000; border-color: #e0c0ff; font-family: Segoe UI, Arial; border-left-width: 2; border-right-width: 2; border-bottom-width: 2; border-top-width: 0px; border-style: dotted; font-size: 16px; color: #e0c0ff;
    }
    -->
</style>

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

Also, you should change the JavaScript that handles the chat box pop-up so you can resize the window. Firefox ignores this code (thank goodness), but IE enforces it. You should change that. Whatever you have done to the pop-up code, make sure "resizeable" is set to "yes". Text size can influence what is visible in the window, so the ability to resize should always be enabled.

Code:

// Wax
function openChat(url, w, h) {
    var options = "width=" + w + ",height=" + h + ",";
    options += "resizable=yes,scrollbars=yes,status=yes,";
    options += "menubar=yes,toolbar=yes,location=yes,directories=no";
    var newWin = window.open(url, 'chatWin', options);
    newWin.focus();
}

rainbow · 10-30-2008 08:20:11

Alright, first of all, I corrected the target="topFrame" error and fixed the message comment field layout:

Code:

    <table border="0" cellspacing="0" cellpadding="2" align="center" width="100%" height="25" bgcolor="<?=$hStripColor?>">
        <tr>
            <td>
                <form name="form1" method="post" action="chat.php" target="topFrame" onsubmit="setTimeout(&quot;MM_setTextOfTextfield('comment','','')&quot;,10)">
                    <div align="center" style="font-size: 12px" class="infotable">
                        <?=$langop_word_message?> (<a href="#" onclick="openWindow('niftyusage.php', 500, 300); return false"><?=$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" />&nbsp;<? if ($cfg['smilies'] != "no") { ?><a onclick="openWindow('emoticons.php', 320, 320); return false;" href="#" target="topFrame">Emotes</a>&nbsp;|<? } ?>&nbsp;<a onclick="openWindow('chathelp.php', 500, 240); return false;" href="#" target="topFrame"><?=$langop_word_help?></a>
                    </div>
                </form>
            </td>
        </tr>
    </table>

Second, I had the FORM tag in place before the TABLE HTML tag and that's what ended up causing problems.

Code:

// Wax
function openChat(url, w, h) {
    var options = "width=" + w + ",height=" + h + ",";
    options += "resizable=yes,scrollbars=yes,status=yes,";
    options += "menubar=yes,toolbar=yes,location=yes,directories=no";
    var newWin = window.open(url, 'chatWin', options);
    newWin.focus();
}

Changing the JavaScript that handles the chatbox pop-up also had no effect on this, by the way. The only solution I did was to place this code in the chat.php file and it goes between the HEAD and BODY tag:

Code:

<style>
    html {
    overflow-x: hidden;
    }
</style>

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

I had to place the padding-right variable 25 pixels from the side of the window and it affected the clock as well as the list of registered usernames in the chatbox. Plus, I also used the overflow-x: hidden HTML tag to hide the horizontal scroll bar for users who have Internet Explorer 6 on their PC.

With this code in place, the page renders correctly under Internet Explorer 6 or later as well as Firefox 2.0.0.x. I'm strongly guessing that the Internet Explorer 6's horizontal scroll bar problem might be a design limitation under Windows NT 4.0, Windows 98, Windows 2000, Windows Me as well as Windows XP. So finding ways how to correct the page rendering bug should be fairly easily enough to do.

NineChime forum

#1 10-29-2008 00:07:09

Page rendering issue with the chatbox under Internet Explorer.

#2 10-30-2008 04:21:05

Re: Page rendering issue with the chatbox under Internet Explorer.

Code:

Code:

Code:

#3 10-30-2008 08:20:11

Re: Page rendering issue with the chatbox under Internet Explorer.

Code:

Code:

Code:

Board footer