Frozen checkbox button and relative positioning in IE 6

[DM]

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!

[Slav]

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