How to remove the effect of all the parent containers on any child control


Tags: asp.net,css,html,telerik,datepicker

Problem :

Q:

I have the following problem , I use RadDatePicker in a table td and i have more than container(div).the problem is the (next and previous navigation text is reversed). I mean >> instead of << and > instead of < and vice versa.i tried to set the properties related to this issue but in vain .some parent container effect reverse any thing.

When i take the control out of any container every thing goes okay . What i wanna is to remove any effect of the containers' CSS on my date picker.Because i don't know which property exactly make this strange effect.

My source code:

<div class="toggle_container">
        <div class="block">
            <h4 align="right" dir="rtl">
               :</h4>
            <hr style="width: 745px;" align="right" />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="masterDiv" align="center" style="width: 800px">
                        <div id="masterControls" style="text-align: center; width: 780px;">
                            <table align="center" cellpadding="3" cellspacing="1" width="98%" dir="rtl">
                                <tr bgcolor="#f1ece2">
                                    <th colspan="3" align="right" valign="middle">

                                    </th>
                                </tr>
                                 <%--  more markup --%>
                                <tr bgcolor="#f1ece2">
                                    <td align="right" class="title" colspan="2" style="text-align: center" width="40%">
                                        الفترة (من):
                                    </td>
                                    <td align="right">

                                            <telerik:RadDatePicker ID="rad_dateFrom" runat="server" Culture="Arabic (Egypt)"
                                                Skin="Web20">
                                            </telerik:RadDatePicker>

                                    </td>
                                </tr>
                                <tr bgcolor="#f1ece2">
                                    <td align="right" class="title" colspan="2" style="text-align: center" width="40%">
                                        الفترة (الى):
                                    </td>
                                    <td align="right">
                                        <telerik:RadDatePicker ID="rad_dateTo" runat="server" Culture="Arabic (Egypt)" Skin="Web20">
                                            <Calendar Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                                ViewSelectorText="x">
                                            </Calendar>
                                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                        </telerik:RadDatePicker>
                                    </td>
                                </tr>
                                 <%-- more markup  --%>
                            </table>
                        </div>
                    </div>
                        </ContentTemplate>
                <Triggers>
                </Triggers>
            </asp:UpdatePanel>

        </div>
    </div>

From Firebug:

<a id="ctl00_ContentPlaceHolder1_rad_dateFrom_calendar_FNN" class="rcFastNext" href="#" title=">>">&gt;&gt;</a>

This is the fast next navigation and what has shown to me is << how to convert it to >>.

Thanks in advance.



Solution :

Thanks a lot. the answer is so simple. just the table direction is rtl.and this is the problem.


    CSS Howto..

    How to set link on image using maplink in responsive theme?

    How to add multiple button in 1 line (css)? [duplicate]

    How do I resize an image size automatically loaded in different browsers and screen size?

    How to use CSS selectors [closed]

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to make the background color transparent

    How to insert line breaks in HTML documents using CSS

    How to check if the current page is a plugin admin panel in wordpress

    How to find last/first not empty child using only CSS?

    how can tell element to get specified styles?

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to center a textarea using CSS?

    How to avoid with css when background of the second line covers the letters of the first line?

    How to turn off word wrapping in HTML?

    how to set the background color of the whole page in css

    How to jump to specific sections of a sprite sheet in css?

    How to center equally spaced anchor tags in

    How to give line-break from css, without using
    ?

    How to replace default controls with custom buttons in Fancybox 2.1.5?

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How do three.js transforms and CSS3 3D-transforms correspond?

    How to align logo and text in bootstrap on small screens?

    How to create smaller CSS files for easier handling while developing [closed]

    How does reveal.js resize elements?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    CSS - fluid design, how to correctly position right floats below the opposing element?

    How to add styling (CSS) to tags in Javascript/Jquery

    in html and css how to get the box space to be smaller? [closed]

    How can I keep the progress bar number value centered and on top?

    How to draw error icon with css only,exactly like in the image