Scheduler is all twisted in IE

3 posts, 0 answers
  1. edgar
    edgar avatar
    2 posts
    Member since:
    May 2009

    Posted 17 Nov 2011 Link to this post

    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;
    }
  2. Plamen
    Admin
    Plamen avatar
    3056 posts

    Posted 22 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. edgar
    edgar avatar
    2 posts
    Member since:
    May 2009

    Posted 22 Nov 2011 Link to this post

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