Scheduler is all twisted in IE

[edgar]

Hi 

I'm using telerik.web.design and telerik.web.ui
version 2010.2.826.35

I also used CSS and images created on this page http://stylebuilder.telerik.com/

and the scheduler control looks all twisted ( see image attach )

can some one help?

this is my css code:




/* RadScheduler Telerik skin */


/* common */
.RadScheduler_Blue,
.RadScheduler_Blue a,
.RadScheduler_Blue input,
.RadScheduler_Blue select,
.RadScheduler_Blue textarea
{
color: #333333;
font: normal 12px/14px "Segoe UI", Arial, sans-serif;
}


.RadScheduler_Blue textarea
{
background: #ffffff;
}


/* header */


/* header sprites */
.RadScheduler_Blue .rsHeader,
.RadScheduler_Blue .rsHeader ul a:hover,
.RadScheduler_Blue .rsHeader ul a:hover span,
.RadScheduler_Blue .rsHeader .rsSelected,
.RadScheduler_Blue .rsHeader .rsSelected em,
.RadScheduler_Blue .rsHeader .rsDatePickerActivator,
.RadScheduler_Blue .rsHeader .rsPrevDay,
.RadScheduler_Blue .rsHeader .rsNextDay
{
background-image: url('Scheduler/rsSprites.png');
}


.RadScheduler_Blue .rsHeader
{
border-width: 1px;
border-style: solid;
border-color: #a1a1a1 #a1a1a1 #6e6e6e;
}


.RadScheduler_Blue .rsHeader,
.RadScheduler_Blue .rsHeader a
{
color: #000000;
}


.RadScheduler_Blue .rsHeader a:hover,
.RadScheduler_Blue .rsHeader em
{
color: #ffffff;
}


.RadScheduler_Blue .rsHeader a.rsToday:hover
{
color: #545454;
}


.RadScheduler_Blue div.rsHeader .rsPrevDay
{
width: 16px;
margin: 7px 0 0 3px;
background-position: 0 -48px;
}


.RadScheduler_Blue div.rsHeader .rsNextDay
{
width: 16px;
margin: 7px 6px 0 0;
background-position: -15px -48px;
}


.RadScheduler_Blue div.rsHeader a.rsPrevDay:hover
{
background-position: -70px -48px;
}


.RadScheduler_Blue div.rsHeader a.rsNextDay:hover
{
background-position: -85px -48px;
}


/* content */


.RadScheduler_Blue .rsContent
{
background: #ffffff;
}


/* <headers> */


.RadScheduler_Blue .rsHorizontalHeaderTable
{
color: #000000;
background: #ededed;
}


.RadScheduler_Blue .rsHorizontalHeaderWrapper {
border-color: #d1d1d1;
background: #ededed;
}


.RadScheduler_Blue .rsSpacerCell,
.RadScheduler_Blue .rsAllDayHeader,
.RadScheduler_Blue .rsVerticalHeaderWrapper,
.RadScheduler_Blue .rsVerticalHeaderTable
{
background: #f2f2f2 url('Scheduler/rsVerticalHeaderBg.png') repeat-y;
}


.RadScheduler_Blue .rsVerticalHeaderTable th
{
border-color: #d1d1d1;
color: #000000;
}


.RadScheduler_Blue .rsHorizontalHeaderTable th
{
border-color: #d1d1d1;
background-color: #ededed;
background-image: url('Scheduler/rsSprites.png');
}


.RadScheduler_Blue .rsVerticalHeaderTable th
{
border-color: transparent #d1d1d1;
border-top: 0;
}


.RadScheduler_Blue .rsVerticalHeaderTable .rsAlt th
{
border-color: #d1d1d1;
}


/* </headers> */


/* <all-day-row> */


.RadScheduler_Blue .rsAllDayRow
{
background: #ededed;
}


.RadScheduler_Blue .rsSpacerCell,
.RadScheduler_Blue .rsAllDayHeader,
.RadScheduler_Blue .rsVerticalHeaderTable .rsAllDayHeader
{
color: #000000;
border-color: #d1d1d1;
}


.RadScheduler_Blue .rsAllDayRow td,
.RadScheduler_Blue .rsContentTable .rsAllDayRow td
{
border-color: #d1d1d1;
border-style: solid;
}


.RadScheduler_Blue .rsVerticalHeaderTable .rsMainHeader th
{
border-bottom-color: #d1d1d1;
}


.RadScheduler_Blue .rsSpacerCell,
.RadScheduler_Blue .rsContent .rsAllDayHeader
{
border-bottom-color: #d1d1d1;
}


/* </all-day-row> */


.RadScheduler_Blue .rsContent,
.RadScheduler_Blue .rsTopWrap .rsFooter
{
border: 1px solid #828282;
border-top: 0;
}


.RadScheduler_Blue div.rsContent
{
border-bottom-color: #828282;
}


.RadScheduler_Blue .rsContentTable td
{
border-color: #ebebed;
border-bottom-style: dotted;
}


.RadScheduler_Blue .rsContentTable .rsAlt td
{
border-color: #d1d1d1 #ebebed;
border-bottom-style: solid;
}


.RadScheduler_Blue .rsMonthView .rsOtherMonth
{
background-color: #fafafa;
}


/* <appointments> */
.RadScheduler_Blue .rsApt .rsArrowTop,
.RadScheduler_Blue .rsApt .rsArrowBottom,
.RadScheduler_Blue .rsApt .rsArrowLeft,
.RadScheduler_Blue .rsApt .rsArrowRight,
.RadScheduler_Blue .rsApt .rsAptDelete,
.RadScheduler_Blue .rsApt .rsAptResize,
.RadScheduler_Blue .rsApt .rsAptReminder,
.RadScheduler_Blue .rsApt .rsAptRecurrence,
.RadScheduler_Blue .rsApt .rsAptRecurrenceException
{
background-color: transparent;
background-image: url('Scheduler/rsSprites.png');
background-repeat: no-repeat;
}


.RadScheduler_Blue .rsApt .rsAptDelete
{
width: 22px;
}


.RadScheduler_Blue .rsAptCreate,
.RadScheduler_Blue .rsMonthView .rsAptCreate
{
background-color: #b2b2eb;
background-image: url('Scheduler/rsSprites.png');
background-repeat: repeat-x;
}


.RadScheduler_Blue .rsAptCreateRow2,
.RadScheduler_Blue .rsMonthView .rsAptCreateRow2
{
background-color: #b2b2eb;
background-image: url('Scheduler/rsSprites.png');
background-repeat: repeat-x;
}


.RadScheduler_Blue .rsNonWorkHour,
.RadScheduler_Blue .rsSunCol,
.RadScheduler_Blue .rsSatCol
{
background-color: #f5f5f5;
}


.RadScheduler_Blue .rsAptCreateRow3,
.RadScheduler_Blue .rsMonthView .rsAptCreateRow3,
.RadScheduler_Blue .rsAptCreateRow4,
.RadScheduler_Blue .rsMonthView .rsAptCreateRow4,
.RadScheduler_Blue .rsAptCreateRow5,
.RadScheduler_Blue .rsMonthView .rsAptCreateRow5
{
background: #b2b2eb;
}


.RadScheduler_Blue .rsSelectedSlot,
.RadScheduler_Blue .rsMonthView .rsSelectedSlot
{
    background: #9393c7;
    border-color: #8484b8;
}


.RadScheduler_Blue .rsContentTable td.rsAptCreate.rsSelectedSlot
{
    background: #8484b8;
    border-color: #7474a8;
}


.RadScheduler_Blue .rsContentTable td.rsSelectedSlot
{
    background: #9393c7;
    border-color: #8484b8;
}


/* <New appointment imageless rendering */
.RadScheduler_Blue .rsAptIn, 
.RadScheduler_Blue .rsAptMid, 
.RadScheduler_Blue .rsAptContent
{
    background-color: #aeaee8;
    border-color: #4a4aba;
}


.RadScheduler_Blue .rsAptMid
{
border-color: #7777d1;
}
/* </New appointment imageless rendering> */


.RadScheduler_Blue .rsAptSimple
{
background-color: #aeaee8;
border-color: #4949b8;
}


/* </appointments> */


/* <month view> */


.RadScheduler_Blue .rsMonthView .rsContentTable td
{
border-color: #ededf7;
border-style: solid;
}


/* </month view> */


/* <footer> */


.RadScheduler_Blue div.rsFooter
{
background-color: #ededed;
background-image: url('Scheduler/rsSprites.png');
background-repeat: repeat-x;
}


.RadScheduler_Blue div.rsFooter .rsFullTime
{
color: #000000;
background-position: 0 -248px;
padding: 3px 0 4px 17px;
background-color: transparent;
background-image: url('Scheduler/rsSprites.png');
background-repeat: no-repeat;
}


.RadScheduler_Blue div.rsFooter a.rsFullTime:hover
{
color: #333333;
background-position: 0 -271px;
}


/* </footer> */


/* <inline edit form> */


.RadScheduler_Blue .rsAptEditResizeHandle,
.RadScheduler_Blue .rsAptEditFormWrapper
{
background-image: url('Scheduler/rsSprites.png');
}


.RadScheduler_Blue .rsAptEditFormOuter, /* top */
.RadScheduler_Blue .rsAptEditFormInner  /* bottom */
{
background-image: url('Scheduler/rsInlineEditHSprite.png');
}


.RadScheduler_Blue .rsAptEditFormMiddle, /* left */
.RadScheduler_Blue .rsAptEditFormMiddle2 /* right */
{
background-image: url('Scheduler/rsInlineEditVSprite.png');
}


.RadScheduler_Blue .rsAptEditFormWrapper .rsAptEditTextareaWrapper
{
border-color: #828282;
background: #ffffff;
}


.RadScheduler_Blue .rsAptEditFormWrapper .rsAptEditTextareaWrapper textarea
{
background: #ffffff;
}


/* <inline edit form template and edit background> */


.RadScheduler_Blue .rsAptEditFormWrapper .rsTemplateWrapper,
.RadScheduler_Blue .rsAptEditFormWrapper .rsEditOptions 
{
background: #ededed;
}


/* </inline edit form template and edit background> */


/* </inline edit form> */


/* <advanced edit form> */


.RadScheduler_Blue .rsAdvancedEdit .rsAdvContentWrapper
{
background: #ffffff;
border: 1px solid #828282;
border-top-color: #ababab;
}


* html .RadScheduler_Blue div.rsAdvancedModal .rsAdvContentWrapper
{
background: #ffffff;
}


.RadScheduler_Blue div.rsAdvancedModal div.rsAdvContentWrapper
{
    border-top: 0;
}


.RadScheduler_Blue div.rsAdvancedModal .rsAdvButtonWrapper
{
    padding: 10px 10px 18px 0;
}


* html .RadScheduler_Blue div.rsAdvancedModal .rsAdvButtonWrapper
{
    padding: 10px 10px 10px 0;
}


* html .RadScheduler_Blue div.rsAdvancedModal .rsAdvContentWrapper
{
    margin-top: -1px;
background: #ffffff;
    border: 1px solid #878787;
}


/* <xref input skins> */


.RadScheduler_Blue .rsAdvancedEdit .rsAdvInput,
.RadScheduler_Blue .rsAdvancedEdit select,
.RadScheduler_Blue .rsAdvancedEdit .textareaWrapper
{
border-color: #828282;
}


.RadScheduler_Blue .rsAdvancedEdit .rsInvalid textarea,
.RadScheduler_Blue .rsAdvancedEdit .rsInvalid input,
.RadScheduler_Blue .rsAdvancedEdit .rsAdvTimePicker .riEmpty
{
background-image: url('Input/sprite.gif');
}


.RadScheduler_Blue .rsAdvancedEdit .textareaWrapper
{
background: #ffffff;
}


.RadScheduler_Blue .rsAdvancedEdit .rsInvalid
{
border-color: #6161f2;
color: #6161f2;
}
/* </xref input skins> */


.RadScheduler_Blue .rsAdvancedEdit h2,
.RadScheduler_Blue .rsAdvancedEdit h3
{
color: #37376e;
}


.RadScheduler_Blue .rsAdvancedEdit h2
{
border-bottom: 1px solid #a1a1a1;
}


.RadScheduler_Blue .rsAdvancedEdit h2 span
{
background: #ffffff;
}


.RadScheduler_Blue .rsAdvancedEdit .rsAdvancedSubmitArea
{
border-color: #a1a1a1;
}


/* </advanced edit form> */


/* <date/time picker> */


.RadScheduler_Blue .rsTimePick .RadInput_Blue input.riEnabled,
.RadScheduler_Blue .rsTimePick .RadInput_Blue input.riHover,
.RadScheduler_Blue .rsTimePick .RadInput_Blue input.riFocused
{
background-image: url('Scheduler/rsSprites.png');
}


/* </date/time picker> */


/* <modal dialogs> */


.RadScheduler_Blue .rsModalBgTopLeft,
.RadScheduler_Blue .rsModalBgTopRight,
.RadScheduler_Blue .rsModalBgBottomLeft,
.RadScheduler_Blue .rsModalBgBottomRight
{
    background-image: url('Scheduler/rsModalBg.png');
}


div.RadScheduler_Blue .rsAnimating
{
    background-image: url('Scheduler/rsModalBgIE6.png');
}


* html .RadScheduler_Blue .rsModalBgTopLeft,
* html .RadScheduler_Blue .rsModalBgTopRight,
* html .RadScheduler_Blue .rsModalBgBottomLeft,
* html .RadScheduler_Blue .rsModalBgBottomRight
{
    background-image: url('Scheduler/rsModalBgIE6.png');
}


.RadScheduler_Blue .rsAdvancedEdit .rsAdvTitle,
.RadScheduler_Blue .rsAdvancedEdit .rsAdvInnerTitle
{
    background-image: url('Scheduler/rsModalTitleBg.png');
}


.RadScheduler_Blue .rsAdvancedEdit a.rsAdvEditClose,
.RadScheduler_Blue div.rsModalWrapper .rsModalWindowClose
{
background-image: url('Scheduler/rsSprites.png');
margin-top:-24px;
width:30px;
}


.RadScheduler_Blue .rsAdvancedEdit a.rsAdvEditClose:hover,
.RadScheduler_Blue .rsModalWrapper a.rsModalWindowClose:hover
{
background-position: -71px -526px;
}


.RadScheduler_Blue .rsModalWrapper .rsModalTitle
{
color: #000000;
background-image: url('Scheduler/rsSprites.png');
}


.RadScheduler_Blue .rsModalWrapper .rsModalInner
{
border-color: #828282;
background: #ffffff;
}


.RadScheduler_Blue .rsModalWrapper .rsModalIcon
{
background-image: url('Scheduler/rsSprites.png');
}


/* Inline Edit buttons + ModalDialog buttons */
.RadScheduler_Blue .rsModalWrapper .rsModalButtons a,
.RadScheduler_Blue .rsAdvancedEdit div.rsAdvancedSubmitArea a,
.RadScheduler_Blue .rsTopWrap .rsAptEditFormWrapper .rsEditOptions a
{
color: #000000;
background-image: url('Scheduler/rsSprites.png');
}


.RadScheduler_Blue .rsModalWrapper .rsModalButtons a:hover,
.RadScheduler_Blue .rsAdvancedEdit div.rsAdvancedSubmitArea a:hover,
.RadScheduler_Blue .rsTopWrap .rsAptEditFormWrapper .rsEditOptions a:hover
{
color: #000000;
}


/* </modal dialogs> */


.RadScheduler_Blue .rsBottomIndicator .rsOvertimeArrow
{
background: transparent url('Scheduler/rsSprites.png') no-repeat -180px -31px;
}        


.RadScheduler_Blue .rsTopIndicator .rsOvertimeArrow
{
background: transparent url('Scheduler/rsSprites.png') no-repeat -134px -31px;
}








.RadScheduler_Blue .rsAptSelected .rsAptIn,
.RadScheduler_Blue .rsAptSelected .rsAptMid,
.RadScheduler_Blue .rsAptSelected .rsAptContent {
border-color: #161638;
background-image: none;
}

[Plamen]

Hi Edgar,

 
I've made a sample page using the CSS that you provided trying to reproduce the issue, but to no avail. Have you already referred to the Skins help topic on how to creating custom skin?

Best wishes,
Plamen Zdravkov
the Telerik team

[edgar]

thanks, I had solved it already, the problem was I was adding a link to all the css files on my master page (Blue, Red, Green...).

Having only one link instead of them all works good.