Frozen checkbox button and relative positioning in IE 6

2 posts, 0 answers
  1. DM
    DM avatar
    1 posts
    Member since:
    Jan 2012

    Posted 05 Jan 2012 Link to this post

    Hi there,

    We are having the same issue in IE6 and IE7 as noted in the known issue link: known issue with buttons

    We've been able to fix IE7 by adding relative positioning to the containing block as per the link above, however the same doesn't seem to work in IE6. Our pages are generated dynamically, so i've attached the output source structure. In IE7, we can add relative positioning style to the 'TabContent' class to resolve the issue. In IE6, this doesn't work.

    Also noticed that the date picker button is having the same issue.

    here is the inherited style for the anchor (<a>) on checkbox button

    /* Rule from element "style" attribute */
    element.style {
        DISPLAY: inline-block;
        BORDER-TOP-STYLE: none;
        BORDER-RIGHT-STYLE: none;
        BORDER-LEFT-STYLE: none;
        BORDER-BOTTOM-STYLE: none
    }
    /* Rule N°68 from ../Styles/ie6.css */
    .modalPopup A:visited {
        FONT-SIZE: 10px;
        FONT-FAMILY: Arial;
        TEXT-DECORATION: none
    }
    /* Rule N°67 from ../Styles/ie6.css */
    .modalPopup A:active {
        FONT-SIZE: 10px;
        FONT-FAMILY: Arial;
        TEXT-DECORATION: none
    }
    /* Rule N°66 from ../Styles/ie6.css */
    .modalPopup A:hover {
        FONT-SIZE: 10px;
        FONT-FAMILY: Arial;
        TEXT-DECORATION: none
    }
    /* Rule N°65 from ../Styles/ie6.css */
    .modalPopup A:link {
        FONT-SIZE: 10px;
        FONT-FAMILY: Arial;
        TEXT-DECORATION: none
    }
    /* Rule N°2 from ../Styles/ie6.css */
    A:visited {
        COLOR: black
    }
    /* Rule N°13 from /WebResource.axd?d=BZK2bjDOsKT5hgxX0P9nrjT2Xsc4nSa-IVWHoIXvYeh_OgnPxlyCNUZWakbCR1OqjcP9VEnCdLCvnsfyYiV0yqgFMRWn3KnE5fK9CmzmVauHV03hQLLVqubqJpuY7hCobNZSTb7oRqHD-CCHJiWyt3C6ZJA1&t=634614401461107401 */
    .rbToggleButton:hover {
        COLOR: #227c08
    }
    /* Rule N°12 from /WebResource.axd?d=BZK2bjDOsKT5hgxX0P9nrjT2Xsc4nSa-IVWHoIXvYeh_OgnPxlyCNUZWakbCR1OqjcP9VEnCdLCvnsfyYiV0yqgFMRWn3KnE5fK9CmzmVauHV03hQLLVqubqJpuY7hCobNZSTb7oRqHD-CCHJiWyt3C6ZJA1&t=634614401461107401 */
    .rbToggleButton {
        COLOR: #000
    }
    /* Rule N°69 from /WebResource.axd?d=X6HIrZLQLQ7xwWPLhFvjbW_ijneAd5n93tIp5kGCgNH9PpNSAidBuD4pnCSDOEuWGRzrLa9Nxr6XsEMUbh9pyna6nD5TknbcAYsqJrmqbxrQWFW0VCB7rfsP2Dj0bQH6Cqg5cA2&t=634614401461107401 */
    .rbToggleButton {
        DISPLAY: inline-block;
        PADDING-LEFT: 20px;
        CURSOR: default;
        LINE-HEIGHT: 20px;
        POSITION: relative;
        HEIGHT: 20px;
        TEXT-DECORATION: none
    }
    /* Rule N°35 from /WebResource.axd?d=X6HIrZLQLQ7xwWPLhFvjbW_ijneAd5n93tIp5kGCgNH9PpNSAidBuD4pnCSDOEuWGRzrLa9Nxr6XsEMUbh9pyna6nD5TknbcAYsqJrmqbxrQWFW0VCB7rfsP2Dj0bQH6Cqg5cA2&t=634614401461107401 */
    .RadButton {
        CURSOR: pointer
    }
    /* Rule N°1 from /WebResource.axd?d=X6HIrZLQLQ7xwWPLhFvjbW_ijneAd5n93tIp5kGCgNH9PpNSAidBuD4pnCSDOEuWGRzrLa9Nxr6XsEMUbh9pyna6nD5TknbcAYsqJrmqbxrQWFW0VCB7rfsP2Dj0bQH6Cqg5cA2&t=634614401461107401 */
    .RadButton {
        FONT-SIZE: 12px;
        FONT-FAMILY: "Segoe UI" , Arial, Helvetica, sans-serif
    }
    /*--------------
       Inherited from TD
    ------------- */
    /* Rule from element "style" attribute */
    element.style {
        WIDTH: 50%
    }
     
    /*--------------
       Inherited from DIV.TabControlColumn1
    ------------- */
    /* Rule N°163 from ../Styles/ie6.css */
    .TabControlColumn1 {
        FLOAT: left;
        OVERFLOW: scroll;
        WIDTH: 100%;
        BACKGROUND-COLOR: yellow
    }
     
    /*--------------
       Inherited from DIV.TabContent
    ------------- */
    /* Rule N°54 from ../Styles/ie6.css */
    .modalPopup .TabContent {
        BORDER-RIGHT: #777777 1px solid;
        PADDING-RIGHT: 10px;
        BORDER-TOP: #777777 1px solid;
        OVERFLOW-Y: auto;
        PADDING-LEFT: 10px;
        FONT-SIZE: 10pt;
        Z-INDEX: -1;
        FLOAT: left;
        OVERFLOW-X: hidden;
        PADDING-BOTTOM: 15px;
        BORDER-LEFT: #777777 1px solid;
        WIDTH: 423px;
        LINE-HEIGHT: 14px;
        PADDING-TOP: 15px;
        BORDER-BOTTOM: #777777 1px solid;
        HEIGHT: 333px;
        BACKGROUND-COLOR: #dddddd
    }
     
    /*--------------
       Inherited from DIV
    ------------- */
    /* Rule from element "style" attribute */
    element.style {
        FLOAT: left;
        WIDTH: 580px
    }
     
    /*--------------
       Inherited from DIV
    ------------- */
    /* Rule from element "style" attribute */
    element.style {
        FLOAT: left;
        WIDTH: 100%
    }
     
    /*--------------
       Inherited from DIV.Inner
    ------------- */
    /* Rule N°45 from ../Styles/ie6.css */
    .modalPopup .Inner {
        PADDING-RIGHT: 0px;
        OVERFLOW-Y: auto;
        PADDING-LEFT: 30px;
        FLOAT: left;
        OVERFLOW-X: hidden;
        MARGIN-BOTTOM: 0px;
        WIDTH: 590px
    }
     
    /*--------------
       Inherited from DIV.modalPopup
    ------------- */
    /* Rule N°44 from ../Styles/ie6.css */
    .modalPopup {
        BORDER-RIGHT: gray 3px solid;
        BORDER-TOP: gray 3px solid;
        OVERFLOW-Y: hidden;
        OVERFLOW-X: hidden;
        BORDER-LEFT: gray 3px solid;
        WIDTH: 645px;
        BORDER-BOTTOM: gray 3px solid;
        HEIGHT: 577px;
        BACKGROUND-COLOR: #ffffff
    }
     
    /*--------------
       Inherited from BODY
    ------------- */
    /* Rule N°1 from ../Styles/ie6.css */
    BODY {
        FLOAT: left;
        MARGIN: 0px;
        WIDTH: 100%
    }


    Please help!
  2. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 10 Jan 2012 Link to this post

    Hi Darius,

    After examining your screenshot and the provided CSS code, I have noticed that the div HTML element with id TabControlColumn1 is using the overflow property, which is most probably causing the positioning problem of the RadButton. I would suggest applying the CSS property position: relative to this div element in order to display correctly the contained button control under Internet Explorer 6/7.

    If there are other elements on your page that are affected from the same problem, please check for CSS property overflow, applied to any of its wrappers and add position: relative as explained in this article.

    Kind regards,
    Slav
    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
Back to Top