I am playing with css tables to try to set up a calendar (for learning purposes). This table looks OK in Rekonq web browser, and surprisingly it displays even more correctly in IE8, but terrible in Firefox (the top and bottom rows are too high in Firefox)... and I think it is because of the empty cells. The next example below this I have put nonsense characters in the previously empty cells, and it displays properly in Firefox. I have posted the html code for both calendar tables below the examples. The question is, why is this not displaying properly in Firefox, and does anyone know of any tricks to make it work?
This table has the letter 'f' added to the previously empty cells. It displays properly in Firefox, but of course is useless because I want empty cells before the first of the month and after the 31rst.
Here is the xhtml that I am using to do this:
<![CDATA[
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus" /=true />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /=true />
<style type="text/css">
.calendar_month {
border-collapse : collapse;
border-spacing : 0;
display : table;
}
.calendar_week {
display:table-row;
height:100px;
}
.calendar_day {
display : table-cell;
font-weight : bold;
height : 100px;
width : 100px;
border: 1px solid blue;
padding: 1em;
text-align : left;
vertical-align : text-top;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]]]><![CDATA[> */
</script>
</head>
<body>
I am playing with css tables to try to set up a calendar (for learning purposes). This table looks OK in Rekonq web browser but the top and bottom rows are too high in Firefox... an I think it is because of the empty cells. The next example below this I have put nonsense characters in the previously empty cells, and <i>it</i> displays properly in Firefox. I have posted the html code for this below the examples.
<div class="calendar_month">
<div class="calendar_week">
<div class="calendar_day"> </div>
<div class="calendar_day"> </div>
<div class="calendar_day">1</div>
<div class="calendar_day">2</div>
<div class="calendar_day">3</div>
<div class="calendar_day">4</div>
<div class="calendar_day">5</div>
</div>
<div class="calendar_week">
<div class="calendar_day">6</div>
<div class="calendar_day">7</div>
<div class="calendar_day">8</div>
<div class="calendar_day">9</div>
<div class="calendar_day">10</div>
<div class="calendar_day">11</div>
<div class="calendar_day">12</div>
</div>
<div class="calendar_week">
<div class="calendar_day">13</div>
<div class="calendar_day">14</div>
<div class="calendar_day">15</div>
<div class="calendar_day">16</div>
<div class="calendar_day">17</div>
<div class="calendar_day">18</div>
<div class="calendar_day">19</div>
</div>
<div class="calendar_week">
<div class="calendar_day">20</div>
<div class="calendar_day">21</div>
<div class="calendar_day">22</div>
<div class="calendar_day">23</div>
<div class="calendar_day">24</div>
<div class="calendar_day">25</div>
<div class="calendar_day">26</div>
</div>
<div class="calendar_week">
<div class="calendar_day">27</div>
<div class="calendar_day">28</div>
<div class="calendar_day">29</div>
<div class="calendar_day">30</div>
<div class="calendar_day">31</div>
<div class="calendar_day"></div>
<div class="calendar_day"></div>
</div>
</div>
This table has the letter 'f' added to the previously empty cells. It displays properly in Firefox, but of course is useless because I want empty cells before the first of the month and after the 31rst.
<div class="calendar_month">
<div class="calendar_week">
<div class="calendar_day">f</div>
<div class="calendar_day">f</div>
<div class="calendar_day">1</div>
<div class="calendar_day">2</div>
<div class="calendar_day">3</div>
<div class="calendar_day">4</div>
<div class="calendar_day">5</div>
</div>
<div class="calendar_week">
<div class="calendar_day">6</div>
<div class="calendar_day">7</div>
<div class="calendar_day">8</div>
<div class="calendar_day">9</div>
<div class="calendar_day">10</div>
<div class="calendar_day">11</div>
<div class="calendar_day">12</div>
</div>
<div class="calendar_week">
<div class="calendar_day">13</div>
<div class="calendar_day">14</div>
<div class="calendar_day">15</div>
<div class="calendar_day">16</div>
<div class="calendar_day">17</div>
<div class="calendar_day">18</div>
<div class="calendar_day">19</div>
</div>
<div class="calendar_week">
<div class="calendar_day">20</div>
<div class="calendar_day">21</div>
<div class="calendar_day">22</div>
<div class="calendar_day">23</div>
<div class="calendar_day">24</div>
<div class="calendar_day">25</div>
<div class="calendar_day">26</div>
</div>
<div class="calendar_week">
<div class="calendar_day">27</div>
<div class="calendar_day">28</div>
<div class="calendar_day">29</div>
<div class="calendar_day">30</div>
<div class="calendar_day">31</div>
<div class="calendar_day">f</div>
<div class="calendar_day">f</div>
</div>
</div>
</body>
</html>
]]>