Mouse over issue with Office 2007 skin

[Mahesh]

I am having issue with mouse over image when using Office2007 skin.

Height of the image is not proper as height of the item.

Please find attached screenshot for the same.

[Princy]

Hi Mahesh,

Try the following CSS to override the default behaviour.
CSS:

<style type="text/css">
.RadPanelBar_Office2007 .rpGroup a.rpLink:hover

 {

  background-color:#FFCE6D !important;

 }

.RadPanelBar_Office2007 .rpGroup a.rpLink, .RadPanelBar_Office2007 .rpGroup .rpOut

 {

  background-image:none !important;

 }

</style>

Thanks,
Princy.

[Mahesh]

Thanks for the suggestion but it is not a poper way I guess. I think this issue is with Office 2007 skin only. Can't you provide an background image with bigger size which can work without overriding any css.

Thanks again,
Mahesh

[Kate]

Hi Mahesh,

In order to achieve the nice look of the rounded corners when a user hovers on RadPanelItem we use a sprite image with fixed width and height. Therefore if you need to change the height of the PanelItem and/or the image you will also need to alter the sprite image that is applied to the control. Please take a look at the following help article where it is explained in details how this can be done with the RadMenu control:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-creating-custom-skins-sprite.html

Unfortunately, currently we do not have such article for the RadPanelBar control but the approach that you need to take is very similar, if not identical, to the one described in the above mentioned article. I would also recommend that you use FireBug to get the  correct css class selectors.

All the best,
Kate
the Telerik team