CSS absolute positioning not working?

Question

I have events being displayed on a calendar and right now the calendar days height and number get distorted when there is txt in the div. any ideas how to make it so the height and number dont change if I have txt there? I'm guessing it has to do with relative or absolute positioning but im not too sure. thanks!

Here is a pic of whats happening: https://i.sstatic.net/uZPdQ.jpg

Calendar

<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">1</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">2</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">3</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">4</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">5</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">6</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">7</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">8</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">9</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">10</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">11</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">12</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">13</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">14</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">15</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">16</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">17</div><div class="event">Bassmt Friday</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">18</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">19</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">20</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">21</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">22</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">23</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">24</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">25</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">26</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">27</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">28</div></div></td>
</tr>
<tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">29</div></div></td>
<td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">30</div></div></td>

CSS:

table.calendar      { border-left:1px solid #999; }
tr.calendar-row {  }
td.calendar-day { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover   { background:#eceff5; }
td.calendar-day-np  { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number      { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

div.day-number   { 
    background:#999; 
    position:absolute; 
    z-index:2; 
    top:0px; 
    right:-20px; 
    padding:5px; 
    color:#fff; 
    font-weight:bold; 
    width:20px; 
    text-align:center; 
}
td.calendar-day, td.calendar-day-np { 
    width:120px; 
    padding:5px 25px 5px 5px; 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
}

Answer 1

Go into your base.css file and find this:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Remove the last line that says vertical-align: baseline; then refresh the page.

Also might need to empty any browser and server caches if it doesn't correct it the first time.