Improving page layout

Our B&B website displays a calendar when visitors contemplating a reservation visit www.mauitradewinds.com/RezEasy/availability.html and click the "display calendar" button .  The calendar is legible under Internet Explorer, but it is rendered in a "crowded" way under other browsers.  The software which displays this calendar is no longer supported by the vendor.  Is there a way to duplicate the Internet Explorer calendar rendering under other browsers?  
ddantesAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
What you need is for each outer table that holds a group of three tables (months) to have a cellpadding of say "5" instead of "0" to get 5px of space between the months. These outer tables do not have a css class or an id so it will be difficult to get a css selector that affects just those outer tables. I'm assuming you have no direct access to the cellpadding attribute for the auto-generated tables. What you could do instead is add id="calendars" to the div that holds all the calendars, then add this script to the bottom of the page so it runs automatically after the calendars are loaded on the page and adds on the 5px cellpadding.

This will add an extra 5 px padding to the IE rendering of the calendars, but it will still look good in IE.
<script type="text/javascript">
    var calDiv = document.getElementById("calendars");
    var calTables = calDiv.getElementsByTagName("table");
    for (i=0; i<calTables.length; i++) {
        if(!(calTables[i].className == "rez")){
            calTables[i].cellPadding = "5";
        }
    }
</script>

Open in new window

0
 
GreggCommented:
Hi ddantes,

The availability of each rental property can be generated using your existing application. The data is available in the Data/rsvdata.js file. You might consider: http://davidwalsh.name/jquery-datepicker-disable-days

JQuery isnt my area of expertise. This might be an approach to think about.
0
 
ddantesAuthor Commented:
Hello Gregg s:  Thank you for your comment.  The datepicker is interesting.  However, I'm happy with the performance of our online reservation system, and I don't want to implement a calendar separate from the existing system.  My only issue is that there is no space between the display of consecutive months under Firefox, Safari, etc.  while the months are separated by space under Internet Explorer.  It's a minor annoyance.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GreggCommented:
When looking into the output of the calendar - you can edit the css. Are you familiar with css?
/Style/rsv.css

Edit these css styles:

rez, header, detail1, grad
0
 
ddantesAuthor Commented:
That totally worked!  I think it's much easier to look at in the other browsers now, and still fine in IE.  Thanks for your help.
0
 
Tom BeckCommented:
Glad it worked. Thanks for the points.
0
 
ddantesAuthor Commented:
I just noticed one minor issue.  On my local drive, Chrome can't display the calendar now.  But Chrome displays the calendar on the server, with the same file.  I think the files on my local drive are identical to those on the server, so this is a mystery.  Any clue?
0
 
ddantesAuthor Commented:
Please disregard my last question.  The same issue is present on a backup from before the file was changed.  Thanks!
0
All Courses

From novice to tech pro — start learning today.