Browser Compatibility Modifications for a Web Page Calendar

Layout for most browsers

For each month we have to remove the table that holds the month. Our real problem now is that we need an HTML element to replace the table cell, whose value or content can be changed by Script program. An element that comes to mind is the SPAN element. The trouble with the SPAN element is that DOM does not give us a direct way to change its content. Another element that comes to mind is the Input Text Element. You can change the value of this element, easily, using Script.

We shall use the Input Text Element to replace the table cells. We shall give these elements small dimensions, since each of them will take only one or two digits, for the number of the day of the month. We shall make these elements read-only, so that the user can not change their contents. For simplicity, we shall remove their margins and borders; the user will not notice that they are Input Text elements. After a row of the Input Text elements, you have a <br /> element.

All of the Input Text elements that display numbers for the day of the month, except the numbers for Sunday, will be classified in a CSS class called "cell." All of the Input Text elements that hold the number for Sundays will be classified in a CSS class called "sun."

These are the CSS statements for the new Input Text elements:

input.cell {width:23px; background-color:LemonChiffon; margin:0px; border-width:0px}

input.sun {width:24px; background-color:LemonChiffon; margin:0px; border-width:0px; color:red}

This is the HTML code for the single month layout:

<div id="Cal" onclick="CalJustClicked = true;">

<input type="text" class="calHead" id="I01" readonly><input type="text" class="calHead" id="I02" readonly><br />

<input type="text" class="sun" value="S"><input type="text" class="cell" value="M"><input type="text" class="cell" value="T"><input type="text" class="cell" value="W"><input type="text" class="cell" value="T"><input type="text" class="cell" value="F"><input type="text" class="cell" value="S"><br />

<input type="text" class="sun" id="M000" value=""><input type="text" class="cell" id="M001" value=""><input type="text" class="cell" id="M002" value=""><input type="text" class="cell" id="M003" value=""><input type="text" class="cell" id="M004" value=""><input type="text" class="cell" id="M005" value=""><input type="text" class="cell" id="M006" value=""><br />

<input type="text" class="sun" id="M010" value=""><input type="text" class="cell" id="M011" value=""><input type="text" class="cell" id="M012" value=""><input type="text" class="cell" id="M013" value=""><input type="text" class="cell" id="M014" value=""><input type="text" class="cell" id="M015" value=""><input type="text" class="cell" id="M016" value=""><br />

<input type="text" class="sun" id="M020" value=""><input type="text" class="cell" id="M021" value=""><input type="text" class="cell" id="M022" value=""><input type="text" class="cell" id="M023" value=""><input type="text" class="cell" id="M024" value=""><input type="text" class="cell" id="M025" value=""><input type="text" class="cell" id="M026" value=""><br />

<input type="text" class="sun" id="M030" value=""><input type="text" class="cell" id="M031" value=""><input type="text" class="cell" id="M032" value=""><input type="text" class="cell" id="M033" value=""><input type="text" class="cell" id="M034" value=""><input type="text" class="cell" id="M035" value=""><input type="text" class="cell" id="M036" value=""><br />

<input type="text" class="sun" id="M040" value=""><input type="text" class="cell" id="M041" value=""><input type="text" class="cell" id="M042" value=""><input type="text" class="cell" id="M043" value=""><input type="text" class="cell" id="M044" value=""><input type="text" class="cell" id="M045" value=""><input type="text" class="cell" id="M046" value=""><br />

<input type="text" class="sun" id="M050" value=""><input type="text" class="cell" id="M051" value=""><input type="text" class="cell" id="M052" value=""><input type="text" class="cell" id="M053" value=""><input type="text" class="cell" id="M054" value=""><input type="text" class="cell" id="M055" value=""><input type="text" class="cell" id="M056" value="">

</div>

The cells for the numbers of the days of the month are no longer HTML TABLE cells. They are Input Text elements. So the following CSS line, which refers to the tables containing the table cells, is not needed.

table.Inl {display:inline}

The aim of this line was to make the table elements inline.