DP w/ shared calendar ok in IE, not in FF

14 posts, 0 answers
  1. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 08 May 2008 Link to this post

    RadCalendar/Datepicker v2.2.1.0
    Using a Shared Calendar.. is working in several pages, ok.

    But on this ONE page it works in IE, but NOT in Firefox!
    In IE, when floating mouse over calkendar, cursor chages and it repsonds to click and popus up.

    Bu it FF, the cursor chages to a I shape.. anc clikcig does *nothing*!

    I've compared code to other (working ) pages.. no diference
    ..
    Any ideas?

  2. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 10 May 2008 Link to this post

    Hello Steve,

    Is ajax involved in the specific scenario? Do you have any global styles applied to that page? It would be great if you could provide us with a live url and the datepicker markup so we can try to reproduce it locally. Any additional information that you find relevant would also be appreciated.

    Sincerely yours,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 11 May 2008 Link to this post

    Yes Ajax is involved, but I don't think it's the cause of this..
    I think it has to do with applying a 'style' to the shared calendar.

    Example URL:
    http://sendem.com/asp/testcal.aspx

    Markup Code :
                                  <td align="left" style="padding-top: 5px" valign="middle">  
                                      <radCln:RadDatePicker ID="rdpFromDate" runat="server" Width="100px" SharedCalendarID="sharedCalendar">  
                                          <DateInput Skin="">  
                                          </DateInput> 
                                        <Calendar runat="server"/>  
                                      </radCln:RadDatePicker> 
                                  </td> 
                                  <td align="left" valign="middle">  
                    <asp:Label ID="lblToPrompt" runat="server" Text="to"></asp:Label></td>  
                                  <td align="left" style="padding-top: 5px" valign="middle">  
                                    <radCln:RadDatePicker ID="rdpToDate" runat="server" Width="100px" SharedCalendarID="sharedCalendar">  
                                      <DateInput Skin="">  
                                      </DateInput> 
                                        <Calendar ID="Calendar1" Skin="SnDM" runat="server"/>  
                                    </radCln:RadDatePicker> 
                                  </td> 
                                  <td align="left" valign="middle">  
                                  </td> 
     

    Shared Calendar:
      <div style="display:none" align="center"  > 
        <asp:Label ID="lblJobViewID" runat="server" Visible="False"></asp:Label> 
        <asp:Label ID="lblJobID" runat="server" Visible="False"></asp:Label> 
        <radcln:RadCalendar ID="sharedCalendar" runat="server" EnableMultiSelect="false" ShowRowHeaders="false" 
            RangeMinDate="2006/01/01" Skin="SnDM" FastNavigationStep="12"   
            FastNavigationNextText="Next Year" FastNavigationPrevText="Previous Year"   
            NavigationNextText="Next Month" NavigationPrevText="Previous Month" > 
        </radcln:RadCalendar> 
        <br /> 
      </div> 
     

    As it stands, the popup WORKS in IE7 and FAILS in FF

    If I remove the Skin attribute from the shared calendar, it works in both browsers.

    BUT the same skin works elsewhere in the site, for both browsers.
    Here's the 'calendar.css'
     
    /* Telerik RadCalendar SnDM skin */  
     
    table.calendarWrapper_SnDM  
    {  
        background: white;  
        cursor: default;  
        border: solid 1px #ff0006;  
        filter: progid:DXImageTransform.Microsoft.dropShadow(Color=999999,offX=3,offY=3,positive=true);  
    }  
     
    .TableLayout_SnDM td  
    {  
        border-bottom: solid 1px #f4f4f4;  
        width: 22px;  
        font: normal 11px Arial, Verdana, Sans-serf;  
    }  
     
    .TableLayout_SnDM td a  
    {  
        text-align: center;  
        width: 15px;  
        height: 13px;  
        padding: 1px;  
        display: block;  
        text-decoration: none !important;   /*sfb*/  
        color: #000;  
        cursor: default;  
    }  
     
    .DaysOfWeek_SnDM  
    {  
        color: #535353;  
        text-align: center;  
        text-transform: uppercase;  
        height: 17px;  
        border-bottom: solid 1px #dde1e4 !important;  
        background: url('Img/DaysOfWeekBg.gif');  
    }  
     
    .otherMonth_SnDM a  
    {  
        color: #d1d1d1 !important;  
        padding: 1px;  
        display: block;  
        width: 100%;  
        text-align: center !important;  
        height: 13px;  
        margin: 1px;  
    }  
     
    .otherMonth_SnDM span  
    {  
        color: #d1d1d1;  
        padding: 1px;  
        display: block;  
        width: 100%;  
        height: 13px;  
        text-align: center !important;  
        margin: 1px;  
    }  
     
    .outOfRange_SnDM span  
    {  
        background: #fff;  
        color: #d1d1d1;  
        display: block;  
        width: 100%;  
        height: 13px;  
        text-align: center !important;  
    }  
     
    .titlebar_SnDM  
    {  
        font: bold 11px Arial, Verdana, Sans-serf;  
        height: 20px !important;  
        border-bottom: solid 1px #8a9db5;  
        width: 100%;  
        background-color:#0000C0;   
        color:#FFFFC0;  
    /*  color: white;  
        background: #b9c4d2 url('Img/titlebarBg.gif') repeat-x; */  
    }  
     
    .titlebar_SnDM img  
    {  
     
    }  
     
    .MonthYearFastNav_SnDM  
    {  
        border: 1px solid #a0aab6;  
        background: white;  
        font: normal 8pt Tahoma;  
        color: #000;  
        border-collapse: separate;  
        filter: progid:DXImageTransform.Microsoft.dropShadow(Color=a0aab6,offX=2,offY=2,positive=true);  
        cursor: hand;  
        cursor: pointer;  
    }  
     
    .MonthYearFastNav_SnDM td  
    {  
        background: white;  
        vertical-align: middle;  
        text-align: center;  
        border: solid 1px white !important;  
    }  
     
    .MonthYearFastNav_SnDM td.selected_SnDM  
    {  
        background: #f9f6dd;  
        color: black;  
        text-align: center;  
        border: solid 1px #e3d7c0 !important;  
    }  
     
    .MonthYearFastNav_SnDM td.bottom_SnDM  
    {  
        text-align: right;  
        padding-left: 9px;  
    }  
     
    .MonthYearFastNav_SnDM td input  
    {  
        background: #ced8dd;  
        border: solid 1px #69798c;  
        font: normal 11px Arial, Verdana, Sans-serf;  
        color: #000000;  
        float: left;  
        width: auto;  
        margin-right: 6px;  
    }  
     
    .radCalDefault_SnDM a:hover,  
    .radCalHover_SnDM a:hover,  
    .radCalWeekendDefault_SnDM a:hover,   
    .radCalWeekendHover_SnDM a:hover  
    {  
        /*background: #f9f6dd !important;*/    
        background: #fff;  
        height: 13px !important;        
        /*border: solid 1px #e3d7c0 !important;*/    
        display: block;  
        padding: 0px !important;    /*sfb*/  
        color: black !important;    /*sfb*/  
    }  
     
    .radCalDefault_SnDM a,  
    .radCalHover_SnDM a,  
    .radCalWeekendDefault_SnDM a,   
    .radCalWeekendHover_SnDM a  
    {  
        background: #fff;  
        border: solid 1px #fff;  
        text-align: right;  
        height: 13px;  
        display: block;  
        text-decoration: none;  
        color: #000;  
    }  
     
     
    .radCalToday_SnDM a  
    {  
        background: white;  
        border: solid 1px #ff6600;   
        color: black !important;  
    }  
     
    .radCalTodaySelected_SnDM a  
    {  
        background: #ced8dd;  
        border: solid 1px #a0aab6;  
        color: black !important;  
    }  
     
    .radCalSelect_SnDM a,  
    .radCalWeekendSelect_SnDM a  
    {  
        background: #ced8dd;  
        border: solid 1px #a0aab6;  
        color: black !important;  
        text-align: center !important;  
    }  
     
    .radPopupImage_SnDM img  
    {  
        vertical-align: middle;  
        _vertical-align: top; /* IE fix */    
        margin-left: 2px;  
        margin-right: 2px;  
        margin-top: -1px; /* IE margins fix */  
        _margin-top: 0px;   
        border-width: 0px;  
    }  
     
    .radDisabled_SnDM img  
    {  
         filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);  
        -moz-opacity: 0.6;  
        opacity: 0.6;  


    HTH
    Steve






  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 12 May 2008 Link to this post

    Hello Steve,

    RadDateTimePicker and RadInput use a proprietary display:-moz-inline-stack style for Firefox in order to behave like inline-block elements (Firefox does not support display:inline-block yet). However, the -moz-inline-stack style creates problems with links, which become unclickable. To fix this, links should be made relatively positioned and their outline style should be removed.

    In other words, please add this CSS code to your RadCalendar skin:

    .radPopupImage_SnDM
    {   
        position:relative;
        outline:none;
    }
    *+html .radPopupImage_SnDM /*IE7*/
    {
        position:static;
    }
    * html .radPopupImage_SnDM /*IE6*/
    {
        position:static;
    }


    Please note that relative positioning should not be applied in Internet Explorer (it triggers another IE bug), hence the two CSS hacks are needed.

    I am not sure why the pickers work on other pages, maybe the links inherit a relative positioning style from somewhere. If you are interested in finding out, please provide another live URL where the pickers work in Firefox and I will take a look.

    Let us know if you need more information.


    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 12 May 2008 Link to this post

    Brilliant - yes, that fixes it.. thank you.

    Was this a "known problem" and is it documented somewhere?
    (Or is this something new that has shown up?)
  6. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 12 May 2008 Link to this post

    BTW - you can re-try the link I sent http://sendem.com/asp/testcal.aspx
    It is still active, and I have uploaded the revised CSS

    One question - why do I get a border/drop-shadow around the calendar in IE, but not in FF?


  7. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 12 May 2008 Link to this post

    Hello Steve,

    It looks like the relative positioning requirement is not documented - I searched for it when I replied you the previous time and found nothing. We will add it for sure.

    As for the drop shadow - it appears only in IE, because only IE supports the so called CSS filters (these are IE proprietary styles and no other browser will start supporting them). You can remove it for visual consistency across the different browsers or just leave it like that.


    Best wishes,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 12 May 2008 Link to this post

    the drop shadow - it appears only in IE, because only IE supports the so called CSS filters (these are IE proprietary styles and no other browser will start supporting them).

    Yes of course.. I remember now!

    • Is there any way of  replicating something like that in 'pure' CSS?
    • How about just a plain border around the outside of the calendar?
  9. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 13 May 2008 Link to this post

    Hi Steve,

    1) Is there any way of  replicating something like that in 'pure' CSS?

    In general, yes, it is possible, but you need at least two HTML elements to put background images in. However, table elements are not very convenient to use for this purpose.

    2)
    How about just a plain border around the outside of the calendar?

    Sure, you can set a thicker border on the right and bottom, which will mimic a shadow.


    Kind regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 13 May 2008 Link to this post

    2) How about just a plain border around the outside of the calendar?

    Sure, you can set a thicker border on the right and bottom, which will mimic a shadow.

    I don't suppose there's some sample CSS.. "lying around" there... <g>?
  11. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 13 May 2008 Link to this post

    Hi Steve,

    Please try this:

    table.calendarWrapper_SnDM
    {
        border:solid #ff0006;
        border-width:1px 2px 2px 1px;
    }

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  12. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 13 May 2008 Link to this post

    No 'cigar' on that one, I'm afraid <g>

    Modified the CSS (removing the 'transform' which works with IE only)... now contains this:
    /* Telerik RadCalendar SnDM skin */  
     
    table.calendarWrapper_SnDM  
    {  
        background: white;  
        cursor: default;  
    /*  border: solid 1px #ff0006;    
        filter: progid:DXImageTransform.Microsoft.dropShadow(Color=999999,offX=3,offY=3,positive=true);  
    */  
        border:solid #ff0006;  
        border-width:1px 3px 3px 1px;  
     
    }  
     

    But now, both FF & IE have no outside border.. you can see at the same link (I have uploaded CSS): http://sendem.com/asp/testcal.aspx

    Doncha just love CSS <not>?

    Steve











  13. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 13 May 2008 Link to this post

    Hi Steve,

    Yes indeed, it should be like that:

    table.calendarWrapper_SnDM 

        border:solid #ff0006  !important;
        border-width:1px 3px 3px 1px  !important;
        border-collapse: separate !important;
    }

    This is because RadCalendar has an inline zero boder style rendered by default in the HTML.

    I hope it works now.


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  14. Steve Bywaters
    Steve Bywaters avatar
    90 posts
    Member since:
    Mar 2005

    Posted 13 May 2008 Link to this post

    Very nice!

    (Colour changed... CSS uploaded to link)

    Thank you very much.

    Steve
Back to Top