Inne pomoc z szablonem - HTML/CSS

Adres forum:
https://bravo.net.pl

Wersja silnika:
1.8.11

Opis problemu:
Mam problem z szablonem index. Tak wygląda kod głównej części strony:

<div  style="display: table; width: 100%; border-collapse: separate; border-spacing: 0px">
  <div style="display: table-row; margin: 0px: padding: 0px">
    <div  class="side" style="padding: 6px 8px 6px 6px;
    width: 193px;
    max-width: 193px;
    display: table-cell
    ">
      <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
        <thead>
          <tr>
            <td class="thead_purple_short{$collapsedthead['whosonline']}">
              <div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['whosonline']}.png" id="whosonline_img" class="expander" alt="[-]" title="[-]" /></div>
              <div><strong>Online</strong></div>
            </td>
          </tr>
        </thead>
        <tbody style="{$collapsed['whosonline_e']}" id="whosonline_e" >
          {$whosonline}
          {$wwot}
          {$birthdays}
        </tbody>
      </table>
    </div>

    {$ps_header_index}

    <div  class="forum" style="padding: 6px 0px 0px 0px; display: table-cell">
      {$forums}
    </div>

    <div class="side" style="padding: 6px 6px 6px 8px;
    height: 270px;
    max-height: 270px;
    width: 193px;
    max-width: 193px;
    display: table-cell
    ">
      <table id="radio" style="table-layout: fixed; word-wrap: break-word;" border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
        <thead>
          <tr>
            <td class="thead_green_short">
              <div class="expcolimage">
                <img src="{$theme['imgdir']}/collapse{$collapsedimg['whosonline']}.png" id="radio_img" class="expander" alt="[-]" title="[-]"/>
              </div>
              <strong>Radio</strong>
            </td>
          </tr>
        </thead>
        <tbody style="{$collapsed['radio_e']}" id="radio_e">
          <tr>
            <td class="trow1">
              <div class="hidden">
                <script type="text/javascript">
                  <!--//--><![CDATA[//><!--
                    if (document.images) {
                      img1 = new Image();
                      img1.src = "https://bravo.net.pl/radio/loading.gif";
                    }
                  //--><!]]>
                </script>
              </div>


              <!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
                <div style="width:180px; height:60px; margin: 0px 0px 0px 0px; background-color:red; background-image: url(radio/loading.gif); background-position: center center; background-repeat: no-repeat">
                  <script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
                  <script type="text/javascript">
                    MRP.insert({
                    'url':'http://privat.is-by.us:8000/necta192.mp3',
                    'lang':'pl',
                    'codec':'mp3',
                    'volume':100,
                    'autoplay':false,
                    'forceHTML5':true,
                    'jsevents':true,
                    'buffering':3,
                    'title':'Nectarine Demoscene Radio',
                    'wmode':'transparent',
                    'skin':'mcclean',
                    'width':180,
                    'height':60
                    });
                  </script>
                </div>
              <!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->

...dalej 3x to samo co wyżej i </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

O ile na kompie w IE11  i Firefoxie wszystko wygląda OK, to już jak otwieram stronkę w Safari na telefoniku,  po kliknięciu tego dynksu ukrywającego/przywracającego tabelkę w prawym górnym rogu tabelka sąsiadująca poszerza się odrobinkę w stronę "zwolnionej przestrzeni". Przed zmianami tego nie było, więc wnoszę, że coś jednak jest nie do końca tak jak powinno z tym kodem. Pytanie - co? Podejrzewam, że problemem może być albo ramka otaczająca główną część, albo umieszczenie poszczególnych tabelek w divach. Ramka zaczyna się pod koniec szablonu header i wygląda tak (konkretnie od drugiego diva się zaczyna, bo to wcześniej to już było, ale wklejam dla janości):

<div class="wrapper">
  {$pm_notice}
  {$remote_profile_picture_notice}{$bannedwarning}
  {$bbclosedwarning}
  {$unreadreports}{$myprofile_alertbar}
  {$pending_joinrequests}
  {$awaitingusers}
  <div style="display: table; width: 100%">
    <div id="bg_content_topleft"></div><div id="bg_content_topcenter"></div><div id="bg_content_topright"></div>
  </div>
  <div style="display: table; width: 100%">
    <div id="bg_content_middleleft"></div>
    <div id="bg_content_middlecenter">
      <br />
      <navigation>
      <br />

... a kończy się na początku footera. Tak wygląda CSS ramki:

#bg_content_topleft {
   background-image: url(/images/topleft.png);
   background-repeat: no-repeat;
   background-color: #fff;
   color: #000;
   padding: 0px 0px 0px 0px;
   margin: 0px;
   height: 13px;
   max-height: 13px;
   width: 29px;
   max-width: 29px;
   display: table-cell;
}
#bg_content_topcenter {
   background-image: url(/images/topcenter.png);
   background-repeat: repeat-x;
   background-color: #fff;
   color: #000;
   padding: 0px 0px 0px 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   height: 13px;
   max-height: 13px;
   width: auto;
   display: table-cell;
}
#bg_content_topright {
   background-image: url(/images/topright.png);
   background-repeat: no-repeat;
   background-color: #fff;
   color: #000;
   padding: 0px 0px 0px 0px;
   margin: 0px;
   height: 13px;
   max-height: 13px;
   width: 29px;
   max-width: 29px;
   display: table-cell;
}
#bg_content_middleleft {
   background-image: url(/images/middleleft.png);
   background-repeat: repeat-y;
   background-color: #fff;
   color: #000;
   padding: 0px 0px 0px 0px;
   margin: 0px;
   height: 100%;
   max-height: 100%;
   width: 29px;
   max-width: 29px;
   display: table-cell;
}
#bg_content_middlecenter {
   background-color: #fff;
   color: #000;
   padding: 0px 0px 20px 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   height: 100%;
   max-height: 100%;
   width: auto;
   display: table-cell;
}
#bg_content_middleright {
   background-image: url(/images/middleright.png);
   background-repeat: repeat-y;
   background-color: #fff;
   color: #000;
   padding: 0px 0px 0px 0px;
   margin: 0px;
   height: 100%;
   max-height: 100%;
   width: 29px;
   max-width: 29px;
   display: table-cell;
}