This is a migrated thread and some comments may be shown as answers.

padding doesn't apply in ie7

4 Answers 36 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
hamid bahan
Top achievements
Rank 1
hamid bahan asked on 15 May 2010, 09:22 AM
i used stylebuilder to generate style for panel  and it works correctly in firfox 3.6.3
but following style doesn't apply for ie7
i attached picture  to show diffrenece
i used  telerik version 2010.1.309.20

DIV.RadPanelBar_Office2007

 

.rpRootGroup .rpItem {

 

 

BACKGROUND-COLOR: #D6E8FF;

 

 

PADDING-BOTTOM: 7px;

 

}


complete css:

 

.RadPanelBar_Office2007

 

 

 

 

{

 

background: #fff;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpRootGroup

 

 

 

 

 

{

 

border-color: #999;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpLink,

 

 

 

 

.RadPanelBar_Office2007

 

.rpTemplate

 

 

 

 

 

{

 

color: #000;

 

 

font: normal 12px/24px tahoma,"Segoe UI", Arial, sans-serif;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpLink

 

 

 

 

 

{

 

background-color: #e4e4e4;

 

 

border-color: #999;

 

}

 

/* compensate for borders */

 

 

 

 

 

.RadPanelBar_Office2007

 

.rpLink .rpOut .rpImage

 

 

 

 

 

{

 

margin-top:-2px;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpExpanded

 

 

 

 

 

{

 

border-color: #3d556c;

 

}

 

 

 

/*-----*/

 

 

 

 

.RadPanelBar_Office2007

 

.rpRootGroup .rpSlide .rpGroup .rpItem .rpLink

 

{

 

text-indent:2px;

 

}

 

 

 

 

.RadPanelBar_Office2007

 

.rpLink:hover,

 

 

 

 

.RadPanelBar_Office2007

 

.rpFocused,

 

 

 

 

.RadPanelBar_Office2007

 

.rpSelected

 

 

 

 

 

{

 

color: #892500;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpLink:hover,

 

 

 

 

.RadPanelBar_Office2007

 

.rpFocused

 

 

 

 

 

{

 

background-color: #ffe79c;

 

 

border-color: #c98400;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpSelected,

 

 

 

 

.RadPanelBar_Office2007

 

.rpSelected:hover

 

 

 

 

 

{

 

background-color: #ffa517;

 

 

border-color: #ca4b0c;

 

}

 

 

 

div.RadPanelBar_Office2007

 

.rpLink .rpOut,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpFocused .rpOut,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpLink:hover .rpOut,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpSelected .rpOut,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpSelected:hover .rpOut

 

 

 

 

 

{

 

 

/*padding-bottom: 0px;*/

 

 

 

 

 

 

border: 0;

 

}

 

 

 

/* <disabled items> */

 

 

 

 

.RadPanelBar_Office2007

 

.rpDisabled,

 

 

 

 

.RadPanelBar_Office2007

 

.rpDisabled:hover

 

 

 

 

 

{

 

color: #bbb;

 

 

background-color: #e4e4e4;

 

 

border-color: #999;

 

 

cursor: default;

 

}

 

 

 

.RadPanelBar_Office2007

 

.rpDisabled:hover .rpOut

 

 

 

 

 

{

 

border-color: #e4e4e4;

 

}

 

 

 

/* </disabled items> */

/* <expand arrows> */

 

 

 

 

.RadPanelBar_Office2007

 

.rpExpandable .rpText,

 

 

 

 

.RadPanelBar_Office2007

 

.rpExpanded .rpText

 

 

 

 

 

{

 

background-color: transparent;

 

 

background-image: url('PanelBar/Expandable.png');

 

 

background-repeat: no-repeat;

 

}

 

 

 

/* </expand arrows> */

/* <subitems> */

 

 

 

 

.RadPanelBar_Office2007

 

.rpGroup

 

 

 

 

 

{

 

background-color: #d6e8ff;

 

}

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpLink,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpTemplate

 

 

 

 

 

{

 

color: #000;

 

 

background-color: transparent;

 

 

background-image: none;

 

 

border: 0;

 

 

margin: 0 2px;

 

 

padding: 1px;

 

}

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpLink:hover,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpFocused,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpSelected,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpSelected:hover

 

 

 

 

 

{

 

color: #892500;

 

 

border: 1px solid #c98400;

 

 

background-color: #ffe79c;

 

 

padding: 0;

 

}

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpSelected

 

 

 

 

 

{

 

background-color: #ffa517;

 

 

border-color: #ca4b0c;

 

}

 

 

 

/* <subitems (disabled)> */

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpDisabled,

 

 

 

 

div.RadPanelBar_Office2007

 

.rpGroup .rpDisabled:hover

 

 

 

 

 

{

 

color: #bbb;

 

 

text-decoration: none;

 

 

background-color: #fff;

 

 

border: 0;

 

 

padding: 1px;

 

}

 

 

 

/* </subitems (disabled)> */

/* <subitems> */

/* <background positioning>

.RadPanelBar_Office2007 .rpLink,

.RadPanelBar_Office2007 .rpExpanded

{

background-position: 0 0;

}

.RadPanelBar_Office2007 .rpFocused,

.RadPanelBar_Office2007 .rpLink:hover,

.RadPanelBar_Office2007 .rpExpanded:hover

{

background-position: 0 -200px;

}

.RadPanelBar_Office2007 .rpSelected,

.RadPanelBar_Office2007 .rpSelected:hover

{

background-position: 0 -400px;

}

.RadPanelBar_Office2007 .rpFirst .rpLink,

.RadPanelBar_Office2007 .rpFirst .rpExpanded

{

background-position: 0 -1px;

}

.RadPanelBar_Office2007 .rpFirst .rpFocused,

.RadPanelBar_Office2007 .rpFirst .rpLink:hover

{

background-position: 0 -201px;

}

.RadPanelBar_Office2007 .rpFirst .rpSelected,

.RadPanelBar_Office2007 .rpFirst .rpSelected:hover

{

background-position: 0 -401px;

}

*/

/* <expand arrows> */

 

 

 

 

.RadPanelBar_Office2007

 

.rpExpandable .rpText,

 

 

 

 

.RadPanelBar_Office2007

 

.rpExpanded .rpText

 

 

 

 

 

{

 

padding-right: 20px;

 

 

background-repeat: no-repeat;

 

}

 

 

 

 

 

DIV.RadPanelBar_Office2007 {

 

 

MARGIN-TOP: 0px;

 

 

BACKGROUND-COLOR: transparent;

 

}

 

DIV.RadPanelBar_Office2007 .rpRootGroup {

 

 

BORDER-RIGHT: 0px solid;

 

 

BORDER-TOP: #FFFFFF 0px solid;

 

 

BORDER-LEFT: 0px solid;

 

 

BORDER-BOTTOM: 0px solid ;

 

 

BACKGROUND-COLOR: transparent;

 

}

 

DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink {

 

 

BACKGROUND-POSITION: 0px 0px;

 

 

BORDER-TOP: #6693CF 1px solid;

 

 

FONT-WEIGHT: bold;

 

 

FONT-SIZE: 11px;

 

 

BACKGROUND-IMAGE: url('PanelBar/item-bg.gif');

 

 

COLOR: #15428b;

 

 

LINE-HEIGHT: 18px;

 

 

text-indent:-10px;

 

 

BORDER-BOTTOM: #D6E8FF 0px solid;

 

 

FONT-FAMILY:tahoma, Segoe UI, Arial, sans-serif;

 

 

 

 

HEIGHT

 

: 18px;

 

 

BACKGROUND-COLOR: #D6E8FF;

 

 

}

 

 

 

 

DIV.RadPanelBar_Office2007

 

.rpRootGroup .rpItem {

 

 

BACKGROUND-COLOR: #D6E8FF;

 

 

PADDING-BOTTOM: 7px;

 

}

 

 

 

DIV.RadPanelBar_Office2007

 

.rpRootGroup .rpItem .rpGroup .rpItem {

 

 

 

PADDING-BOTTOM: 0px;

 

}

 

 

 

DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink:hover {

 

 

BORDER-TOP: #6693CF 1px solid;

 

 

 

 

BACKGROUND-POSITION

 

: 0px 0px;

 

 

BACKGROUND-IMAGE: url('PanelBar/item-bg.gif');

 

}

 

 

 

DIV.RadPanelBar_Office2007 .rpRootGroup .rpExpandable {

 

 

BORDER-BOTTOM-COLOR: #D6E8FF;

 

 

BORDER-BOTTOM: #D6E8FF 1px solid;

 

}

 

DIV.RadPanelBar_Office2007 .rpRootGroup .rpExpanded {

 

 

BACKGROUND-POSITION: 0px 0px;

 

 

BORDER-BOTTOM: #D6E8FF 1px solid;

 

}

 

 

DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink .rpText {

 

 

BORDER-TOP: #FFFFFF 1px solid;

 

}

 

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink {

 

 

BORDER-RIGHT: #D6E8FF 1px solid;

 

 

PADDING-RIGHT: 0px;

 

 

BORDER-TOP: #D6E8FF 1px solid;

 

 

PADDING-LEFT: 0px;

 

 

FONT-WEIGHT: normal;

 

 

BACKGROUND-IMAGE: none;

 

 

PADDING-BOTTOM: 0px;

 

 

MARGIN-LEFT: 0px;

 

 

BORDER-LEFT: #D6E8FF 1px solid;

 

 

COLOR: #000000;

 

 

width:175px;

 

 

MARGIN-RIGHT: 10px;

 

 

MARGIN-left: 10px;

 

 

PADDING-TOP: 0px;

 

 

BORDER-BOTTOM: #D6E8FF 1px solid;

 

 

BACKGROUND-COLOR: #D6E8FF;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink:hover {

 

 

BACKGROUND-POSITION: 0px 0px;

 

 

BORDER-TOP: #FFBD69 1px solid;

 

 

PADDING-LEFT: 0px;

 

 

BORDER-LEFT-COLOR: #FFBD69;

 

 

BACKGROUND-IMAGE: url('PanelBar/ItemHoverBg.gif');

 

 

MARGIN-LEFT: 0px;

 

 

MARGIN-RIGHT: 10px;

 

 

MARGIN-left: 10px;

 

 

BORDER-BOTTOM: #FFBD69 1px solid;

 

 

BORDER-RIGHT-COLOR: #FFBD69;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpSelected {

 

 

BORDER-TOP: #FFBD69 1px solid;

 

 

BORDER-LEFT-COLOR: #FFBD69;

 

 

BACKGROUND-IMAGE: none;

 

 

BORDER-BOTTOM: #FFBD69 1px solid;

 

 

BACKGROUND-COLOR: #FFE6A0;

 

 

BORDER-RIGHT-COLOR: #FFBD69;

 

 

MARGIN-RIGHT: 10px;

 

 

MARGIN-left: 10px;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpExpanded {

 

 

BORDER-TOP: #FFBD69 1px solid;

 

 

BORDER-LEFT-COLOR: #FFBD69;

 

 

BACKGROUND-IMAGE: none;

 

 

BORDER-BOTTOM: #FFBD69 1px solid;

 

 

BACKGROUND-COLOR: #FFE6A0;

 

 

BORDER-RIGHT-COLOR: #FFBD69;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpDisabled {

 

 

FONT-SIZE: 11px;

 

 

COLOR: #000000;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpDisabled:hover {

 

 

FONT-SIZE: 11px;

 

 

COLOR: #000000;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink .rpOut {

 

 

BACKGROUND-COLOR: transparent;

 

 

BORDER-RIGHT-COLOR: #00A1D6;

 

}

 

DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink .rpText {

 

 

BORDER-TOP: 0px solid;

 

 

BACKGROUND-COLOR: transparent;

 

}

4 Answers, 1 is accepted

Sort by
0
hamid bahan
Top achievements
Rank 1
answered on 19 May 2010, 03:12 PM
nobody can help?
telerik team please!!
0
Accepted
Kamen Bundev
Telerik team
answered on 19 May 2010, 03:17 PM
Hello Hamid,

Add the green colored properties to this rule in your CSS file (somewhere around the middle of the CSS you've sent) and the issue should go away:
DIV.RadPanelBar_Office2007 .rpRootGroup .rpItem
{
    BACKGROUND-COLOR: #D6E8FF;
    PADDING-BOTTOM: 7px;
    width: 100%;
    zoom: 1;
}


Regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
hamid bahan
Top achievements
Rank 1
answered on 19 May 2010, 04:10 PM
thanks for reply
i used attached file to expand/collapse panelbar
these style is ok in pervious version(2009.Q1)
but it seems not ok in 2010.Q1
the image doesnt change  in firefox and ie7

please check it!
0
Accepted
Kamen Bundev
Telerik team
answered on 25 May 2010, 12:07 PM
Hi Hamid,

I'm sorry for the late reply.

Which of both expandable images do you want to use - in the screenshot of your RadPanelBar you use different image for the expandable items? To use the one already in your skin folder, add these CSS rules at the end of your skin:
.RadPanelBar_Office2007_rtl .rpExpandable .rpText,
.RadPanelBar_Office2007_rtl .rpExpanded .rpText
{
    padding-left: 20px;
}
.RadPanelBar_Office2007_rtl .rpGroup .rpText
{
    padding: 0 10px;
}
.RadPanelBar_Office2007 .rpExpandable .rpText { background-position: 100% 0; }
.RadPanelBar_Office2007 .rpExpanded .rpText { background-position: 100% -176px; }
.RadPanelBar_Office2007_rtl .rpExpandable .rpText { background-position: 0 0; }
.RadPanelBar_Office2007_rtl .rpExpanded .rpText { background-position: 0 -176px; }
.RadPanelBar_Office2007 .rpGroup .rpLink,
.RadPanelBar_Office2007 .rpGroup .rpLink .rpOut { background-position: 0 200px; }
.RadPanelBar_Office2007 .rpGroup .rpLink:hover,
.RadPanelBar_Office2007 .rpGroup .rpFocused { background-position: 100% -22px; }
.RadPanelBar_Office2007 .rpGroup .rpLink:hover .rpOut,
.RadPanelBar_Office2007 .rpGroup .rpFocused .rpOut { background-position: 0 0; }
/*      <subitems (selected)> */
.RadPanelBar_Office2007 .rpGroup .rpSelected,
.RadPanelBar_Office2007 .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
.RadPanelBar_Office2007 .rpGroup .rpSelected .rpOut,
.RadPanelBar_Office2007 .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }
/*      </subitems (selected)> */
/*      <subitems (expand arrows)> */
.RadPanelBar_Office2007 .rpGroup .rpExpandable .rpText,
.RadPanelBar_Office2007 .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }
.RadPanelBar_Office2007 .rpGroup .rpExpanded .rpText,
.RadPanelBar_Office2007 .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }
.RadPanelBar_Office2007_rtl .rpGroup .rpExpandable .rpText,
.RadPanelBar_Office2007_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 0 -938px; }
.RadPanelBar_Office2007_rtl .rpGroup .rpExpanded .rpText,
.RadPanelBar_Office2007_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 0 -1078px; }
/*      </subitems (expand arrows)> */

Let me know if this helps.

Regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Visual Style Builder
Asked by
hamid bahan
Top achievements
Rank 1
Answers by
hamid bahan
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or