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

[Steve Bywaters]

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?

[Steve]

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

[Steve Bywaters]

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

[Dimo]

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

[Steve Bywaters]

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?)

[Steve Bywaters]

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?

[Dimo]

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

[Steve Bywaters]

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?

[Dimo]

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

[Steve Bywaters]

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>?

[Dimo]

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

[Steve Bywaters]

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

[Dimo]

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

[Steve Bywaters]

Very nice!

(Colour changed... CSS uploaded to link)

Thank you very much.

Steve