Date Boxes

A word about the spanky new date boxes on the left… they are floated left, and created using semantic markup and valid style :-). Insert this into any WordPress blog, and you have the barebones structure of my date box:


<?php
$date = the_date("d:m:y:Y", "", "", FALSE);
if($date) {
  list($day, $month, $year, $yearlong) = split(":", $date);
?>
<div class="date">
<span class="day">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/<?php print $day ?>/" title="Click here to view all posts on this day.">
<?php print $day; ?>
</a>
</span>
<span class="month">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/" title="Click here to view all posts of this month."><?php print $month ?></a>/<a href="/log/<?php print $yearlong ?>/" title="Click here to view all posts of this year."><?php print $year ?></a>
</span>
</div>
<?php
}
?>

And of course, the style rules:


.date {
display: block;
margin: 5px;
padding: 2px;
float: left;
border: 1px solid #444;
background-color: #111;
color: #eee;
text-align: center;
}

.date span.day {
font-family: trebuchet ms, tahoma, sans-serif;
font-size: 2.2em;
display: block;
}

.date a {
font-weight: normal;
text-decoration: none;
color: #eee;
}

.date a:hover {
text-decoration: none;
}

.date span.month {
font-size: 0.9em;
font-family: verdana, arial, sans-serif;
display: block;
}

Now a few words about its features: it only appears “once per day” so the page won’t be cluttered up with date boxes. Then too, the day, the month and the year are clickable so you can directly navigate to their pages. There are still a few issues remaining regarding the style when a day has too few posts, and it also seems to mess up a few of my pages, so it needs a bit of work. But imho, it spruces up the visual appeal and the usability of the site a good bit 😉

Really valid XHTML

For an XHTML page to be valid, it should of course, validate. (Funny sentence! <g>)

An oft-forgotten rule though is that XHTML documents are XML documents, and because of that, they must be served using the mime-type application/xhtml+xml. Internet Explorer predictably, chokes on this, therefore, you need some selective magic to accomplish this. If you’ve got PHP on your webserver, the following script will do the deed:


/*Send application/xhtml+xml to compliant browsers, text/html to others*/
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
  header("Content-type: application/xhtml+xml; charset=utf-8");
  print "< "."?xml version=\"1.0\" encoding=\"UTF-8\"?".">";
}
else {
  header("Content-type: text/html; charset=utf-8");
}