Proactive chat code = one serious mess!

[twhiting9275]

I say again, the code that is called into the DOM when a request is called is fully semantically standards compliant

Care to take a bet on that? I've already found out what the problem is, and it's caused by NON compliance with standards dating back to html 2.0

I'm not talking small, petty things here, either. I'm talking things such as

# Error Line 5, Column 26: there is no attribute "HEIGHT".

Guess what? As soon as I took out the illegal attribute, things work perfectly, imagine that!

So, the code is NOT standards compliant, and because of this, breaks websites.

[bear]

Originally Posted by twhiting9275

As soon as I took out the illegal attribute, things work perfectly, imagine that!
So, the code is NOT standards compliant, and because of this, breaks websites.

But why is it only affecting your website, if it's Kayako's code at fault? I don't see this behavior on my site (properly coded and displays perfectly), and have never heard of this issue before you mentioned it. Seems to me if it was Kayako's coding, many more would be complaining.

Perhaps that height element is causing you issues because of the very reason Jamie had mentioned, that you hadn't defined your div heights and so on.

[Jamie Edwards]

Hi again,

It seems as though you have made customizations to your HTML (I have managed to get onto your page with the "Need assistance" box called up). The HTML output of the request box is hardly anything like the original. Does it work if you revert your code customizations?

If you spot in your HTML, the <div> I have been talking about all the time is terminated before the HTML output of the table. Because the table is not wrapped in this <div>, indeed it is breaking your tables.

Can you think what is on your page that is causing this?

Here is yours (HTML-tidy'd):
HTML screenshot: http://jamie.kayako.org/screenshots/20071103-221006.png
Render screenshot: http://jamie.kayako.org/screenshots/20071103-221036.png

 <div ID="proactivechatdiv" STYLE=
    "display: none; float: left; position: absolute; top: 214px; left: 615px; width: 450px; height: 400px; z-index: 500;">
    </div>
    <script TYPE="text/javascript" LANGUAGE="javascript" SRC=
    "https://secure.linux-tech.net/support/visitor/index.php?_m=livesupport&amp;_a=htmlcode&amp;departmentid=0">
    </script>

    <table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="662">
      <tbody>
        <tr>
          <td>
          </td>
        </tr>
      </tbody>
    </table>

    <table BORDER="0" CELLPADDING="1" CELLSPACING="0" HEIGHT="200" WIDTH="450">
      <tbody>
        <tr>
          <td BGCOLOR="#3894E5">
            <table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="450">
              <tbody>
                <tr>
                  <td ALIGN="left" BGCOLOR="#EDF4FF" VALIGN="top">
                    <table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
                      <tbody>
                        <tr BGCOLOR="#ffffff">
                          <td COLSPAN="2" ALIGN="center" HEIGHT="29" VALIGN="top"><img
                          SRC=
                          "https://secure.linux-tech.net/support/themes/client_default/supportsuite.gif">
                          </td>
                        </tr>

                        <tr ALIGN="center" BGCOLOR="#3894E5">
                          <td COLSPAN="2" HEIGHT="1" VALIGN="top"><img SRC=
                          "https://secure.linux-tech.net/support/themes/client_default/space.gif"
                           HEIGHT="1" WIDTH="1"></td>
                        </tr>

                        <tr ALIGN="center">
                          <td COLSPAN="2" VALIGN="top"><font FACE=
                          "Verdana, Arial, Helvetica, sans-serif" SIZE="2"><br>
                          <br>
                           Need Assistance? Click "Chat Now" to chat with a Live
                          Operator.<br>
                          <br>
                          </font><br>
                          <br>
                          </td>
                        </tr>

                        <tr>
                          <td ALIGN="center" VALIGN="top" WIDTH="47%"><a HREF=
                          "javascript:doProactiveRequest();"><font COLOR="#FF3300" FACE=
                          "Trebuchet MS, Verdana, Arial, Helvetica, sans-serif" SIZE=
                          "4">Chat Now</font></a></td>

                          <td ALIGN="center" VALIGN="top" WIDTH="53%"><a HREF=
                          "javascript:closeProactiveRequest();"><font COLOR="#6666FF"
                          FACE="Trebuchet MS, Verdana, Arial, Helvetica, sans-serif"
                          SIZE="4">No Thanks!</font></a></td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table> 

Here is the default output (http://support.kayako.com):
HTML screenshot: http://jamie.kayako.org/screenshots/20071103-221157.png
Render screenshot: http://jamie.kayako.org/screenshots/20071103-221210.png

 <div ID="proactivechatdiv" STYLE=
    "display: block; float: left; position: absolute; top: 214px; left: 615px; width: 450px; height: 400px; z-index: 500;">
      <table BORDER="0" CELLPADDING="1" CELLSPACING="0" HEIGHT="200" WIDTH="450">
        <tbody>
          <tr>
            <td BGCOLOR="#3894E5">
              <table BORDER="0" CELLPADDING="0" CELLSPACING="0" HEIGHT="200" WIDTH="450">
                <tbody>
                  <tr>
                    <td ALIGN="left" BGCOLOR="#EDF4FF" VALIGN="top">
                      <table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
                        <tbody>
                          <tr BGCOLOR="#ffffff">
                            <td COLSPAN="2" ALIGN="center" HEIGHT="29" VALIGN="top"><img
                            SRC="https://members.kayako.net/images/kayakologo.gif"></td>
                          </tr>

                          <tr ALIGN="center" BGCOLOR="#3894E5">
                            <td COLSPAN="2" HEIGHT="1" VALIGN="top"><img SRC=
                            "https://members.kayako.net/images/space.gif" HEIGHT="1"
                            WIDTH="1"></td>
                          </tr>

                          <tr ALIGN="center">
                            <td COLSPAN="2" VALIGN="top"><font FACE=
                            "Verdana, Arial, Helvetica, sans-serif" SIZE="2"><br>
                            <br>
                             Need Assistance? Click "Chat Now" to chat with a Live
                            Operator.<br>
                            <br>
                            </font><br>
                            <br>
                            </td>
                          </tr>

                          <tr>
                            <td ALIGN="center" VALIGN="top" WIDTH="47%"><a HREF=
                            "javascript:doProactiveRequest();"><font COLOR="#FF3300"
                            FACE="Trebuchet MS, Verdana, Arial, Helvetica, sans-serif"
                            SIZE="4">Chat Now</font></a></td>

                            <td ALIGN="center" VALIGN="top" WIDTH="53%"><a HREF=
                            "javascript:closeProactiveRequest();"><font COLOR="#6666FF"
                            FACE="Trebuchet MS, Verdana, Arial, Helvetica, sans-serif"
                            SIZE="4">No Thanks!</font></a></td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div> 

For some reason, the <div> statement in your HTML is not wrapped around the table containing the request message:

<div id="proactivechatdiv" style="display: none; float: left; position: absolute; top: 214px; left: 615px; width: 450px; height: 400px; z-index: 500;"></div> 

[twhiting9275]

Maybe I was just hallucinating that the height thing fixed it, but I swore it did. Either way, ick, ick, ick.

The only change I made was to remove the height which breaks standards anyways. The rest was C&P from the livesupport into the page.

Not that much of a big thing now, as like I said, I'm rewriting things to be smarty capable, new template, etc, but still, as I keep saying, care shuld be taken so that clients don't have to be doing this. It's (obviously) possible, as your competition has no problem with this.

Either way, the responses of "It's your site", "It's your fault" fit the standard kayako response I've seen so far. We'll see what happens when a real problem comes up.

[bear]

Originally Posted by twhiting9275

care shuld be taken so that clients don't have to be doing this.

But yours is the only case we've heard of this happening. If it wasn't your code specifically that has or causes the issue, others would also be having the problem. Do you know of anyone else having this issue?