Fieldset Round Corner and Padding Issues in IE, Internet Explorer

8 posts, 0 answers
  1. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    Hi
    We have facing rounded corner issues and padding in internet explorer.
    Also legend color is different both IE and Moz ..not checked in Chrome yet. :(
    Please refer the attachment.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 29 Jan 2013 Link to this post

    Hi Vargis,

    RadFormDecorator creates a table in older browsers that do not support CSS 3(e.g. IE7/IE8), in order to simulate the rounded corners, while in new browsers it uses CSS 3. That is why there is some inconsistency in the padding of the elements that are inside of the FieldSet under older and newer browsers. You can set padding of the elements that are inside of the FieldSet, so that they fit in older browsers as well.

    Regarding the FieldSet issue under IE8 - this may result due to the set of a global CSS rule applied to TD/TR tag. I suggest that you set TD/TR rules for the particular table not the whole page.

    Regarding the inconsistency of the legend color - I was not able to reproduce it. Could you test our online demos and then tell us what is the problematic one and the applied skin. Otherwise, if the issue is related to RadFormDecorator, you can open a support ticket and send us a runnable project, so we can do an investigation locally.

    I also advise that you make sure your browse is not zoomed, because this can also break pages.

    All the best,
    Danail Vasilev
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    Then can you please specify what CSS property is to set for the particular table/td.

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 01 Feb 2013 Link to this post

    Hi Vargis,

    I am guessing that you might have applied some global CSS rules to Table/TR/TD elements, that can affect the proper rendering of the rounded corners under IE8.

    From the provided screenshot I believe there is a padding or margin CSS rule applied to one of above mentioned HTML elements. I would suggest you to examine the custom CSS registered on the page and remove any margin/padding applied to table, td, tr, fieldset global selectors.

    If the above suggestion does not fix the issue we will need a runnable example so we can examine and debug it locally, so could you open a formal support ticket and provide an example.

    All the best,
    Danail Vasilev
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 04 Feb 2013 Link to this post

    Actually fieldset have a nice padding in all browsers except in IE.
    Also except IE fieldset have full width. So we added width for table and padding for fieldset respectively.

    table{border-collapse:collapse; width:100%}
    fieldset {padding:3px 5px; margin:0}
    legend {font-weight:bold!important; font-size:11px!important}

    Here I am attaching a screen shot of the page
    without using the above Global CSS.

    In this you can see the RadGrid Horizontal Scroll is not aligned also.


  7. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 04 Feb 2013 Link to this post

    Removed table Global CSS properties

    Just add this for enhance legend
    legend {font-weight:bold!important; font-size:11px!important}

    Still facing white space issue in IE8
    You can see that white space is only in fieldset which have no legend.
    Please refer the attachments. Also no proper padding in left side.
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 06 Feb 2013 Link to this post

    Hi Vargis,

    Regarding the improper padding of the decorated Fieldset under IE8/IE7, you can fix it by applying the following CSS rules:
    <style type="text/css">
        /* IE8 CSS hack */
        @media \0screen {
            .rfdRoundedContent fieldset {padding: 0 10px 10px 10px;}
        }
         
         /* IE6 and IE7 CSS hack */
        .rfdRoundedContent fieldset {*padding: 0 10px 10px 10px;}
    </style>

    Regarding the white space issue in IE8, I could not reproduce it - you can watch a short video with the test here. Could you try to reproduce this issue with the VS sample I have attached in the archive and then tell us what changes you have done?

    Could you also confirm the version of RadControls you are using?

    Kind regards,
    Danail Vasilev
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  9. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 18 Feb 2013 Link to this post

    How beautiful in Mozilla Firefox .......

    Hi Boss
    I had added the CSS mentioned above but still have problem in IE8.
    Please see the attachments

    Hi Danail,

    Please give me a solution for IE ...Here things are going so worsed please respond
    I had attached IE8 rendering and Mozilla

    It is mainly occuring when i add some div inside this fieldset (Div Class having float property).

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017