I have a RadMenu that has two top-level items, each with a transparent PNG image. When the menu is loaded, I can see the menu's background color behind the transparent part of the PNG as expected. However, when I hover over the menu and the menu's highlighted background color shows, the non-highlighted color is what is displayed behind the transparent part of the PNG. Not only that, but this odd coloring is offest about 8px (1/2 the width of the PNG) to the right.
I've attached an image of what this looks like.
Obviously, this is ugly and isn't what I would consider "releasable" when we go to testing in a couple of days. What can be done about this?
PS: For some reason, "Default", "Black", "Simple", "Telerik", and "Web20" all seem to not show this odd coloring.
I've attached an image of what this looks like.
Obviously, this is ugly and isn't what I would consider "releasable" when we go to testing in a couple of days. What can be done about this?
PS: For some reason, "Default", "Black", "Simple", "Telerik", and "Web20" all seem to not show this odd coloring.
5 Answers, 1 is accepted
0
Hello Ryan,
The sprite of the RadMenu control is meant for 16x16 images. Your images are bigger so you need to modify the sprite accordingly or adjust the image margins. Can you tell me the width of your image and I will do it for you?
Sincerely yours,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
The sprite of the RadMenu control is meant for 16x16 images. Your images are bigger so you need to modify the sprite accordingly or adjust the image margins. Can you tell me the width of your image and I will do it for you?
Sincerely yours,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2010, 02:32 PM
Thank you for your reply. The images that I am using are, in fact, 16px x 16px. Is there anything else I need to try? (I have attached the images to this message)
~Ryan
~Ryan
0
Accepted
Hello Ryan,
I didn't ask you before but if you use Q2 701 release which had similar problem (though the hole was only 3px wide), please upgrade at least to Q2 SP1.
If your images are 16x16 and you use different RadControls for ASP.NET AJAX version, then you somehow overrode the margins and paddings the image had. Can you send me a live URL of your application or a sample project with this issue isolated and I will help you fix it. You can open a support ticket if you prefer privacy.
Kind regards,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I didn't ask you before but if you use Q2 701 release which had similar problem (though the hole was only 3px wide), please upgrade at least to Q2 SP1.
If your images are 16x16 and you use different RadControls for ASP.NET AJAX version, then you somehow overrode the margins and paddings the image had. Can you send me a live URL of your application or a sample project with this issue isolated and I will help you fix it. You can open a support ticket if you prefer privacy.
Kind regards,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 12 Jan 2010, 02:28 PM
I am currently using version 2009.2.701.35 as acquired from here: http://www.telerik.com/account/downloads.aspx. The newest version that I see available is 2009.2 826 - how can I upgrade to Q2 SP1?
I have sent in a stripped version of my project so you can see its behavior. When running my full project, the image gap is about 16px, but in this example, for some reason, it's only about 2px or 3px.
I have sent in a stripped version of my project so you can see its behavior. When running my full project, the image gap is about 16px, but in this example, for some reason, it's only about 2px or 3px.
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 13 Jan 2010, 03:28 PM
Thank you for the solution! I copied the new 2009.2 826 DLL into my project, but the margin issue was still there. After applying the CSS fix, however, the issue diminished. Then, I realized that I am setting padding to all images via CSS, so after removing this padding for this specific image, the margin issue disappeared!
Thanks again for your assistance!
| div.RadMenu img.rmLeftImage |
| { |
| padding-left: 0px; |
| padding-right: 0px; |
| margin-left: -3px; |
| } |
Thanks again for your assistance!