Booking Engine Table Code Rendering Strangely in 2 Different Themes

  • I have hit the wall with this one.
    Booking Engine: Availability Online. Sent me code with js/text script, then some tables with <divs>
    4 different revisions and it only gets worse. I have gone into Chrome and unchecked ALL CSS styles and still:
    1. the dropdown boxes (cells/<tr>) won’t shrink to their contents.
    2. The “year” (3rd cell) is not indenting in the sidebar version. Or the top two or indenting, either way.

    PLEASE someone look at this code and tell me what is wrong with it. I am pasting the code that is in the sidebar below on this page:
    https://stonehearthinn.insights-llc.com/about/

    The footer widget is a revision with multiple <td>s which I thought would solve the problem, it didn’t.

    This theme is Cyberchimps (bootstrap). I also changed the theme to Virtue Premium by Kadence and results were same/worse.

    Thank You in advance to anyone who can help me here.

    SIDEBAR CODE:

    <script type="text/javascript">
    function selectAoCurrentDate() {

        if (document.layers) {
            document.banner.visibility = 'hidden';
            document.banner.left = ((window.innerWidth-800)/2);
            document.banner.visibility = 'visible';
        }

        var months = new makeAoMonthArray('January','February','March','April','May','June','July','August','September','October','November','December');
        var date = new Date();
        var day = date.getDate();
        var month = date.getMonth() + 1;
        var yy = date.getYear();
        var year = (yy < 1000) ? yy + 1900 : yy;

        // add the years to the dropdown
        for (i = 0; i<=2; i++) {
            var optn   = document.createElement("OPTION");
            optn.text  = year + i;
            optn.value = year + i;
            document.ao_availability_search.yearselect.options.add(optn);
        }

        document.ao_availability_search.monthselect.selectedIndex=month-1;
        document.ao_availability_search.dayselect.selectedIndex=day-1;
        document.ao_availability_search.yearselect.selectedIndex=0;
    }

    function makeAoMonthArray() {
        for (i = 0; i<makeAoMonthArray.arguments.length; i++) {
            this[i + 1] = makeAoMonthArray.arguments[i];
        }
    }

    function setFormAction() {
        if(document.pressed == 'Search Available Rooms') {
            document.ao_availability_search.action ="https://www.availabilityonline.com/availability_search.php";
        } else if (document.pressed == 'View All Rooms') {
            document.ao_availability_search.action ="https://www.availabilityonline.com/availtable.php";
        }
        return true;
    }
</script>

                 <table border="0" cellpadding="2" cellspacing="0" width="293">
                    <tr>
                        <td valign="top" align="center" width="188">
                            <form name="ao_availability_search" method="get" action="https://www.availabilityonline.com/availability_search.php" style="display:inline;" onsubmit="return setFormAction();">
                                <div style="color: #AE0328; font-family: arial, verdana; font-weight: bold; text-align: left; height: 31; width: 186; margin-left: auto; margin-right: auto">
                                  <p align="left"><font color="#AE0328" size="2"><font face="Verdana">Check
                                  In:</font>&nbsp;</font>

                                <input type="hidden" name="un" value="stonehearth" />

                                <select name="monthselect" id="monthselect">
                                    <option value="1">January</option>
                                    <option value="2">February</option>
                                    <option value="3">March</option>
                                    <option value="4">April</option>
                                    <option value="5">May</option>
                                    <option value="6">June</option>
                                    <option value="7">July</option>
                                    <option value="8">August</option>
                                    <option value="9">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                        </div>
                        </td>
                        <td valign="top" align="left" width="50">

                                <select name="dayselect" id="dayselect">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select>

                        </td>
                        <td valign="top" align="left" width="37">
                            <select name="yearselect" id="yearselect">
                                </select>
                        </td>
                    </tr>    </table>
<table width="294"> <tr><td width="286">
                   <font color="#AE0328"><font size="2" face="Verdana"><b>Number of Nights:</b></font> </font><select name="nights" id="nights">
                                    <option value="1" selected="selected">1 Night</option>
                                    <option value="2">2 Nights</option>
                                    <option value="3">3 Nights</option>
                                    <option value="4">4 Nights</option>
                                    <option value="5">5 Nights</option>
                                    <option value="6">6 Nights</option>
                                    <option value="7">7 Nights</option>
                                    <option value="8">8 Nights</option>
                                    <option value="9">9 Nights</option>
                                    <option value="10">10 Nights</option>
                                    <option value="11">11 Nights</option>
                                    <option value="12">12 Nights</option>
                                    <option value="13">13 Nights</option>
                                    <option value="14">14 Nights</option>
                                </select>&nbsp;&nbsp;
                    <p>
                                  <input type="submit" value="Search Available Rooms" onclick="document.pressed=this.value" /><strong><font size="2" face="Verdana">
                                  <br><br>OR</font><font face="arial">&nbsp;&nbsp;</font><font color="#ffffff" face="arial"><input type="submit" value="View All Rooms" onclick="document.pressed=this.value" /></font></strong>

                </tr></table>
<script type="text/javascript">
    selectAoCurrentDate();
</script>
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ninsights

    (@ninsights)

    I suppose I should mention that if you put that code into a browser as a .htm file, or even Windows Explorer preview pane, the cells adjust and it looks much more normal.

    I am wondering if it has something to do with this code being outdated or not up to modern standards, or at leat the standards that WordPress uses? I don’t know enough about all this yet to diagnose. XHTML, HTML5, CSS3?

    Thread Starter ninsights

    (@ninsights)

    Nothing eh? Can someone look at the code and tell me if anything looks funny by modern code standards?

    Point me in a direction?

    Is at all safe to assume making a child theme and addign the header code to the head and the footer code to the footer would do any good? Or would that only be if I was putting this code on a page/post as opposed to HTML boxes/widgets?

    I have lost so much time on this already I don’t have time to try something that very well won’t work.

    Thanks again for any help at all

    I feel for you! the company are in my oppinion one of the worst in the WP industry. If you cannot resolve the issue forget about a refund they are just crooks offering poor themes and plug-ins.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Booking Engine Table Code Rendering Strangely in 2 Different Themes’ is closed to new replies.