Browser Compatibility Modifications for a Web Page Calendar - The Container for the Yearly Calendar
(Page 3 of 4 )
In the previous parts of the series, we used a main DIV element to hold all the months of the year. The complete layout works very well with Internet Explorer, but does not work with other browsers. So we have to redesign the complete layout.
First we replaced each table cell with an Input Text control. We then abandoned the table, which had the table cells. This table we have abandoned was in a DIV element. Now we have to abandon this DIV element, as I explain in the next paragraph.
Please note from the above single month layout that there is a line break element at the end of each row of Input Text elements. It is this line break element that determines the rows. When you now put these rows in a DIV element, the result with the browsers is not what you expect.
According to the specification, everything should be all right. However, browsers are still unable to handle what we're doing here. So we have to abandon the DIV element for each table.
This means that each Input Text element will not be inside a DIV element, as in the previous part of the series. So the following CSS statement controlling the style of these DIV elements is not needed for this part of the series.
div.CalM {border:2px solid black; display:inline}
There are two DIV elements we are talking about here. One held a month; we have abandoned that. The other one was a main DIV element; we have also abandoned that.
In the previous part of the series, we had a main DIV element (which we have abandoned) that held all the months of the year. Well, having this DIV element now does not help us (with <br /> at the end of each row of the months) to keep the months in rows with browsers. The problem is that browsers have limits in the extent to which they respect the HTML, CSS and JavaScript specifications.
So the main DIV element is replaced by an HTML TABLE element. A set of Input Text elements for a month is in a table cell of this table that replaces the main DIV element. The table has three rows and four columns. Each cell takes a month. This is the table with the content of its first cell:
<table id="YR" onclick="CalJustClicked = true;" width="670">
<tr>
<td>
<input type="text" class="calHead" id="IA1" readonly><input type="text" class="calHead" id="IA2" 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="MA00" value=""><input type="text" class="cell" id="MA01" value=""><input type="text" class="cell" id="MA02" value=""><input type="text" class="cell" id="MA03" value=""><input type="text" class="cell" id="MA04" value=""><input type="text" class="cell" id="MA05" value=""><input type="text" class="cell" id="MA06" value=""><br />
<input type="text" class="sun" id="MA10" value=""><input type="text" class="cell" id="MA11" value=""><input type="text" class="cell" id="MA12" value=""><input type="text" class="cell" id="MA13" value=""><input type="text" class="cell" id="MA14" value=""><input type="text" class="cell" id="MA15" value=""><input type="text" class="cell" id="MA16" value=""><br />
<input type="text" class="sun" id="MA20" value=""><input type="text" class="cell" id="MA21" value=""><input type="text" class="cell" id="MA22" value=""><input type="text" class="cell" id="MA23" value=""><input type="text" class="cell" id="MA24" value=""><input type="text" class="cell" id="MA25" value=""><input type="text" class="cell" id="MA26" value=""><br />
<input type="text" class="sun" id="MA30" value=""><input type="text" class="cell" id="MA31" value=""><input type="text" class="cell" id="MA32" value=""><input type="text" class="cell" id="MA33" value=""><input type="text" class="cell" id="MA34" value=""><input type="text" class="cell" id="MA35" value=""><input type="text" class="cell" id="MA36" value=""><br />
<input type="text" class="sun" id="MA40" value=""><input type="text" class="cell" id="MA41" value=""><input type="text" class="cell" id="MA42" value=""><input type="text" class="cell" id="MA43" value=""><input type="text" class="cell" id="MA44" value=""><input type="text" class="cell" id="MA45" value=""><input type="text" class="cell" id="MA46" value=""><br />
<input type="text" class="sun" id="MA50" value=""><input type="text" class="cell" id="MA51" value=""><input type="text" class="cell" id="MA52" value=""><input type="text" class="cell" id="MA53" value=""><input type="text" class="cell" id="MA54" value=""><input type="text" class="cell" id="MA55" value=""><input type="text" class="cell" id="MA56" value="">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Next: Conclusion >>
More HTML Articles
More By Chrysanthus Forcha
