css - CSS works in debugger, but not on live site

Question

Please review my Fiddle Sample.

Click on a calendar day with an event (orange square).

You'll notice that the date box, is at the bottom of the window.

In the stylesheet, there's a snippet like this...

.calendar *{
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    vertical align: top;
    behavior: url(pie/PIE.htc);
    }

...the vertical-align: top; should bring that box to the top of the window, but it doesn't.

If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.

Not sure why this is... Thoughts?

Answer 1

I seems to be a height issue. Remove height: 100%; from .calendar .c-specific

.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}

Answer 2

This is the line you need to change:

.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/ 
behavior: url(pie/PIE.htc);
}