カレンダーに月別で絵を載せる

カレンダーを一覧で見れるページをせいさくしてみました。

<table class="calendar July" id="date-2008-07" summary="Calendar" cellpadding="0" cellspacing="0">

このように、月の英語のclassと何年の何月のidをそれぞれのカレンダーのtableに指定しありますので、それぞれ月別にcssで画像を指定してげれば、うまく月別に絵がきりかわっていくカレンダーの出来上がりというわけです。

table.calendar {
	padding-top: 100px;
	background-image: url(../img/calendar.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

table.January {
	background-image: url(../img/January.gif);
}

table.February　{
	background-image: url(../img/February.gif);
}

table.February　{
	background-image: url(../img/March.gif);
}

table.April　{
	background-image: url(../img/April.gif);
}

table.May　{
	background-image: url(../img/May.gif);
}

table.June　{
	background-image: url(../img/June.gif);
}

table.July　{
	background-image: url(../img/July.gif);
}

table.August　{
	background-image: url(../img/August.gif);
}

table.September　{
	background-image: url(../img/September.gif);
}

table.October　{
	background-image: url(../img/October.gif);
}

table.November　{
	background-image: url(../img/November.gif);
}

table.December　{
	background-image: url(../img/December.gif);
}

tableの上にpaddingをとり、画像をclass別に読み込めば完成です。

この年のこのつきだけは特別にしたい！という場合はIDをつかったら簡単にできます！

table#date-2008-07 {
	background-image: url(../img/date-2008-07.gif);
}

という具合です。

<MTArchiveList archive_type="Monthly">
	<table class="calendar <$MTArchiveDate format="%B" language="en"$>" id="date-<$MTArchiveDate format="%Y-%m"$$>" cellpadding="0" cellspacing="0" summary="Calendar"$>
	<caption><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%B %Y"$>"><$MTArchiveDate format="%B %Y"$></a></caption>
		<tr>
			<th class="sunday">日</th>
			<th>月</th>
			<th>火</th>
			<th>水</th>
			<th>木</th>
			<th>金</th>
			<th class="saturday">土</th>
		</tr><MTCalendar month="this"><MTCalendarWeekHeader>
		<tr></MTCalendarWeekHeader>
			<td<MTCalendarIfToday>class="today"</MTCalendarIfToday>><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td><MTCalendarWeekFooter>
		</tr></MTCalendarWeekFooter></MTCalendar>
	</table>
</MTArchiveList>

IEだとうまく絵が表示されませんでした・・。tableのpaddingがきいてないらしいです。何かうまい方法あるかな・・。