Text alignment in IE

Racked my brain over this one, so I need a new set of eyes to help. Using Wordpress, I have a div with a calendar graphic set as a background with 2 divs showing the month and the date. In Firefox, it looks fine, but in IE, the text on the date div looks aligned to the bottom, and I want to get it to look like how it does in Firefox. Caveat - haven't had any formal html/css training, so if there is something obvious, please let me know. It doesn't have to be valid CSS, an IE hack would do the trick (I'm not a purist).

I keep thinking there might be another class causing the conflicts, but both Web Developer (Firefox) and IE Developer Tools don't show any other conflicts. Please check out www dot theoneillfamily dot org in IE to see what's happening.

Here's the relevant CSS:

.calendar {
  float: left;
  clear: left;
  background: url(images/calendar.jpg) no-repeat left top;
  width: 50px;
  height: 55px;
}

.calendar p{
  padding-top: 0px;

}

.calendar .month {
  display: block;
  clear: both;
  text-align: center;
  font-size: 14px;
  color: white;
  font-weight: bold;
  padding-top: 2px;
  margin-bottom: 0;
}

.calendar .date {
  display: block;
  clear: left;
  font-size: 30px;
  color: #393939;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
  line-height: 1px;
  padding-top: 2px;
  padding-bottom: 18px;
}

Code (markup):

And here's the relevant HTML:

<div class="calendar">
	<span class="month"><?php the_time('M') ?></span><br>
	<span class="date"><?php the_time('j') ?></span>
</div>

HTML:

TY!!

 

Try Deleting the Line Break <br> from your Source Code. If you have it set to display:block then AFAIK the next span should appear underneath it without this.

Also theres no need for:
.calendar p{
padding-top: 0px;

}
As you have no <p> inside the calender.

You also have line-height set to 1px? Delete this, also get rid of the padding-bottom: 18px; and everything should be coool!!

 

Deleting the <br> and line-height did it. I went through so many different iterations that I was losing my mind, which is why I asked. Thank you very much. (and as the the .calendar p, that was left over from another try at fixing it).

Again, thank you. Fresh eyes always help!!

 

Nice one, yep Line-Height is literally the height of the line, so if the text is only one line you can use it to vertically center the text. So when you had it at 1px, you had the height of the date number at only 1px.