So last night, I'm putting the finishing touches my theme for dasBlog when I ran into a strange little quirk, perhaps someone out there can help me.  First off, let me say that I'm a big fan of using style sheets, gone are the days of using <font /> tags, no-breaking spaces, and the <center></center> tags. Although I have to admit, the <table cellspacing="0" cellpadding="0"></table> tag is still very useful and is the only way I have found to get the footer to always stay at the bottom of the page so I'll never drop that altogether, but that's another entry.  For now, lets get back to the issue at hand.

UPDATE: This has been fixed and yes, I'm an idiot.  See dumbass entry above for explanation.

One of the last things I wanted to do was to clean up the calendar control a bit: expand the header where the month and year are and center it, put a border around the current day, and center the entire calendar in the sidebar.  All was going well, until I tried to center the entire calendar.  I tried doing the following:

the obvious:

<div class="sidebar">
    <div class="sidehead">Archives</div>
    <div class="sidecontent centered">
    <%radio.weblog.drawcalendar ()%>
    </div>
</div>

.sidebar
{
    padding: 10px;
    background-color: #FFFFFF;
}
.centered
{
    text-align: center;
}

then I tried breaking it out

<div class="sidebar">
    <div class="sidehead">Archives</div>
    <div class="sidecontent">
    <div class="centered">
    <%radio.weblog.drawcalendar ()%>
    </div>
    </div>
</div>

.sidebar
{
    padding: 10px;
    background-color: #FFFFFF;
}
.centered
{
    text-align: center;
}

then I tried inline

<div class="sidebar">
    <div class="sidehead">Archives</div>
    <div class="sidecontent">
    <div style="text-align: center;">
    <%radio.weblog.drawcalendar ()%>
    </div>
    </div>
</div>

.sidebar
{
    padding: 10px;
    background-color: #FFFFFF;
}

But nothing was working.  I put a border around the sidebar container to see if it was actually the width I specified in the style sheet (25%); it was and the calendar was still aligned to the left.  What's going on?

This all took about 20 minutes out of my life, I want them back Hanselman (just kidding).  So needing to get to bed I did something I'm not proud of, I used a center tag -don't hate me. 

<div class="sidebar">
    <div class="sidehead">Archives</div>
    <div class="sidecontent">
    <center>
    <%radio.weblog.drawcalendar ()%>
    </center>
    </div>
</div>

.sidebar
{
    padding: 10px;
    background-color: #FFFFFF;
}

I know it's ugly, but it works!  Why does this work buy not the CSS version?  When centering items I always default to text-align: center; is there another way I'm just not seeing?  I don't want to float the object, but it sound a bit more logical (note; I haven't tried anything else yet, I'll do that this weekedn).   Somebody please help, I feel dirty knowing that there is a center tag floating around my site.