DaysOfWeek height IE

4 posts, 0 answers
  1. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 19 Sep 2008 Link to this post

    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.
  2. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 20 Sep 2008 Link to this post

    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-
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 20 Sep 2008 Link to this post

    (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; 
        bordersolid 1px #6788be !important; 
        cursordefault
     
    .calendarWrapper_Web20 td 
        border:0; 
     
    .titlebar_Web20 
        colorwhite
        font-size:18px
        backgroundtransparent;     
     
    .calendarWrapper_Web20 .titlebar_Web20 td 
        border:0; 
     
    .TableLayout_Web20 td 
        text-aligncenter
        color#7f7f7f
        cursordefault
     
    /* all links in the calendar */ 
    .TableLayout_Web20 td a 
        text-decorationnone
        displayblock
        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 
        bordersolid 1px #dde1e4
        backgroundwhite
     
    .TableLayout_Web20 .radCalWeekendHover_Web20, 
    .TableLayout_Web20 .radCalHover_Web20 
      bordersolid 1px #dde1e4
      background-color:#F9F8E0
     
    .radCalToday_Web20 a 
        font-size:18px
        colorblack
        backgroundwhite 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-colorwhite
        cursor: no-drop; 
        bordersolid 1px #dde1e4
    .TableLayout_Web20 .outOfRange_Web20 a, 
    .TableLayout_Web20 .outOfRange_Web20 span 
        color#ccc
     
    .TableLayout_Web20 .DaysOfWeek_Web20 
        color#333 !important;  
        cursordefault
        background#e7f1ff
        text-aligncenter
        border:0; 
        border-bottomsolid 14px #a5bedf;   
         
        height20px !important; /* ignored in IE7 */ 
     
    .TableLayout_Web20 td.DaysOfWeek_Web20 
        height20px !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 
    {    
        border1px solid #6788be
        backgroundwhite
        border-collapsecollapse
        filter: progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=3); 
     
    .MonthYearFastNav_Web20 td 
        text-aligncenter
        vertical-alignmiddle
        border1px solid #d8dde0
        cursorpointer
        padding4px
        fontnormal 11px ArialVerdana, Sans-Serif
        colorblack
     
    .MonthYearFastNav_Web20 td.selected_Web20 
        background#dcfc5c
        colorblack
        border-color#d8dde0
     
    .MonthYearFastNav_Web20 td input 
        backgroundtransparent url(Calendar/ContextMenuInputBg.gif) repeat-x; 
        bordersolid 1px #6788be
        fontbold 11px ArialVerdana, Sans-Serif
        colorwhite
        floatleft
        margin-right1px
        padding0px 2px
     
    /* TimePicker */ 
     
    .radTimeTableCss_Web20 caption 
        displaynone
     
    .radTimeTableCss_Web20  
        font-familyArialVerdana, Sans-Serif
        bordersolid 1px #6788be
        backgroundwhite url(Calendar/calendarBg.gif) repeat-x; 
        cursorpointer
        cursordefault
        border-collapsecollapse
     
    .radTimeTableCss_Web20 td 
        bordersolid 1px #e5e5e5
        padding: 0; 
     
    .radTimeTableCss_Web20 a 
        displayblock
        font-size11px
        text-decorationnone
        colorblack
        text-aligncenter
     
    .radTimeOverCss_Web20 a 
        font-size12px
        font-weightbold
        backgroundwhite url(Calendar/HoverBgTime.gif) repeat-x; 
     
    .radHeaderCss_Web20, 
    th.radTimeOverCss_Web20 
        font-size18px
        font-weightnormal
        colorwhite;    
        background#ebff9d url(Calendar/calendarBg.gif) repeat-x; 
     
    .radItemCss_Web20 a, 
    .radAlternatingItemCss_Web20 
         
     
    .radItemCss_Web20 a:hover, 
    .radAlternatingItemCss_Web20 a:hover 
    {    
         
     
    .radPopupImage_Web20 
        positionrelative;  
        _position: static/*IE fix*/ 
        outlinenone
    *+html .radPopupImage_Web20 
        positionstatic
     
    .radPopupImage_Web20 img 
        vertical-alignmiddle
        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.
  5. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 22 Sep 2008 Link to this post

    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-
Back to Top