DaysOfWeek height IE

[Peter Zolja]

I'm trying to set the height of the row that contains the days of the week. Working with a custom skin and setting "height: 26px !important;" for the .DaysOfWeek_SkinName works for FF3 but not for IE7. I need to find a way that will work in IE as well.

P.S. I removed all width and height information from the CSS since I need to have the cells stretch to fit the content.

[-DJ-]

Hi Peter,

I don't see any special reason why IE7 wouldn't accept that. Can you please paste more code as this info is hardly sufficient for debugging.

Regards,
-DJ-

[Peter Zolja]

(sorry about the double post; I keep forgetting that this forum doesn't like Google's Chrome)

Here's the CSS:

/* Modified Telerik RadCalendar Web20 skin */

.calendarWrapper_Web20
{
    background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
    border: solid 1px #6788be !important;
    cursor: default;
}

.calendarWrapper_Web20 td
{
    border:0;
}

.titlebar_Web20
{
    color: white;
    font-size:18px;
    background: transparent;
}

.calendarWrapper_Web20 .titlebar_Web20 td
{
    border:0;
}

.TableLayout_Web20 td
{
    text-align: center;
    color: #7f7f7f;
    cursor: default;
}

/* all links in the calendar */
.TableLayout_Web20 td a
{
    text-decoration: none;
    display: block;
    margin:0 auto;
}

.TableLayout_Web20 .radCalWeekendDefault_Web20,
.TableLayout_Web20 .radCalWeekendSelect_Web20,
.TableLayout_Web20 .radCalDefault_Web20,
.TableLayout_Web20 .radCalSelect_Web20,
.TableLayout_Web20 .otherMonth_Web20,
.TableLayout_Web20 .radCalToday_Web20
{
    border: solid 1px #dde1e4;
    background: white;
}

.TableLayout_Web20 .radCalWeekendHover_Web20,
.TableLayout_Web20 .radCalHover_Web20
{
  border: solid 1px #dde1e4;
  background-color:#F9F8E0;
}

.radCalToday_Web20 a
{
    font-size:18px;
    color: black;
    background: white url(Calendar/TodayBg.gif) no-repeat;
}

.radCalDefault_Web20 a,
.radCalWeekendDefault_Web20 a
{
    color: #333;
    font-size:12px;
}

.radCalWeekendHover_Web20 a,
.radCalHover_Web20 a
{

}

.radCalWeekendSelect_Web20 a,
.radCalSelect_Web20 a
{

}

.TableLayout_Web20 .otherMonth_Web20 a
{
    color: #ccc;
    cursor: no-drop;
}

.TableLayout_Web20 .outOfRange_Web20
{
    background-color: white;
    cursor: no-drop;
    border: solid 1px #dde1e4;
}
.TableLayout_Web20 .outOfRange_Web20 a,
.TableLayout_Web20 .outOfRange_Web20 span
{
    color: #ccc;
}

.TableLayout_Web20 .DaysOfWeek_Web20
{
    color: #333 !important;
    cursor: default;
    background: #e7f1ff;
    text-align: center;
    border:0;
    border-bottom: solid 14px #a5bedf;

    height: 20px !important; /* ignored in IE7 */
}

.TableLayout_Web20 td.DaysOfWeek_Web20
{
    height: 20px !important; /* ignored in IE7 */
}

/*multimonth view*/

.TableLayout_Web20 .TableLayout_Web20 .titlebar_Web20
{
    padding:6px 0;
    font:15px arial,sans-serif;
    color:#333;
}

/*month view*/

.MonthYearFastNav_Web20
{
    border: 1px solid #6788be;
    background: white;
    border-collapse: collapse;
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=3);
}

.MonthYearFastNav_Web20 td
{
    text-align: center;
    vertical-align: middle;
    border: 1px solid #d8dde0;
    cursor: pointer;
    padding: 4px;
    font: normal 11px Arial, Verdana, Sans-Serif;
    color: black;
}

.MonthYearFastNav_Web20 td.selected_Web20
{
    background: #dcfc5c;
    color: black;
    border-color: #d8dde0;
}

.MonthYearFastNav_Web20 td input
{
    background: transparent url(Calendar/ContextMenuInputBg.gif) repeat-x;
    border: solid 1px #6788be;
    font: bold 11px Arial, Verdana, Sans-Serif;
    color: white;
    float: left;
    margin-right: 1px;
    padding: 0px 2px;
}

/* TimePicker */

.radTimeTableCss_Web20 caption
{
    display: none;
}

.radTimeTableCss_Web20
{
    font-family: Arial, Verdana, Sans-Serif;
    border: solid 1px #6788be;
    background: white url(Calendar/calendarBg.gif) repeat-x;
    cursor: pointer;
    cursor: default;
    border-collapse: collapse;
}

.radTimeTableCss_Web20 td
{
    border: solid 1px #e5e5e5;
    padding: 0;
}

.radTimeTableCss_Web20 a
{
    display: block;
    font-size: 11px;
    text-decoration: none;
    color: black;
    text-align: center;
}

.radTimeOverCss_Web20 a
{
    font-size: 12px;
    font-weight: bold;
    background: white url(Calendar/HoverBgTime.gif) repeat-x;
}

.radHeaderCss_Web20,
th.radTimeOverCss_Web20
{
    font-size: 18px;
    font-weight: normal;
    color: white;
    background: #ebff9d url(Calendar/calendarBg.gif) repeat-x;
}

.radItemCss_Web20 a,
.radAlternatingItemCss_Web20
{

}

.radItemCss_Web20 a:hover,
.radAlternatingItemCss_Web20 a:hover
{

}

.radPopupImage_Web20
{
    position: relative;
    _position: static; /*IE fix*/
    outline: none;
}
*+html .radPopupImage_Web20
{
    position: static;
}

.radPopupImage_Web20 img
{
    vertical-align: middle;
    margin:0 2px;
    border:0;
}

.radDisabled_Web20 img
{
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

.pickerWrapper_Web20
{
    vertical-align:middle;
}

.pickerWrapper_Web20 table
{
    vertical-align:bottombottom;
}

.pickerWrapper_Web20 table,
.pickerWrapper_Web20 td
{
    border: 0;
    padding: 0;
    margin: 0;
}

.pickerWrapper_Web20 .inputCell
{
    padding: 0 4px 0 0;
}

And the ASPX:

<telerik:RadCalendar runat="server" ID="c" Width="734px" Height="500px"
  EnableEmbeddedSkins="false"
  Skin="Web20"
  EnableMultiSelect="false"
  AutoPostBack="true"
  UseRowHeadersAsSelectors="false"
  UseColumnHeadersAsSelectors="false"
  ShowRowHeaders="false"
  ShowOtherMonthsDays="false"

  FastNavigationPrevImage="~/Skins/Web20/Calendar/fastNavLeft.gif"
  NavigationPrevImage="~/Skins/Web20/Calendar/arrowLeft.gif"
  NavigationNextImage="~/Skins/Web20/Calendar/arrowRight.gif"
  FastNavigationNextImage="~/Skins/Web20/Calendar/fastNavRight.gif"

>
</telerik:RadCalendar>

Thanks.

[-DJ-]

Hi Peter,

I took a quick look. The skin css file works perfectly in IE7, until you specify a certain height for the Calendar itself:

<telerik:RadCalendar runat="server" ID="c" Width="734px" Height="500px" ...

In short, I think IE7 decides on it's own where to put the extra pixels that it doesn't get from the css to match the 500 pixels in height stated in the markup.

The cleanest solution would probably be to simply remove the height definition from the calendar itself (at least while testing) and adding appropriate height definition to all relevant classes in the css.

Regards,
-DJ-