This is a migrated thread and some comments may be shown as answers.

DaysOfWeek height IE

3 Answers 29 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Peter Zolja
Top achievements
Rank 1
Peter Zolja asked on 20 Sep 2008, 01:41 AM
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.

3 Answers, 1 is accepted

Sort by
0
-DJ-
Top achievements
Rank 1
answered on 20 Sep 2008, 04:25 PM
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-
0
Peter Zolja
Top achievements
Rank 1
answered on 20 Sep 2008, 04:36 PM
(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.
0
-DJ-
Top achievements
Rank 1
answered on 22 Sep 2008, 11:49 AM
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-
Tags
Calendar
Asked by
Peter Zolja
Top achievements
Rank 1
Answers by
-DJ-
Top achievements
Rank 1
Peter Zolja
Top achievements
Rank 1
Share this question
or