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

IE6 Menu Separator Display Issue

3 Answers 86 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 26 Mar 2009, 03:19 PM
I'm working on my departments first Telerik-driven AJAX app and I must say I love the controls.  Unfortunately, however, we are limited at a corporate level to using only IE6, so a lot of my time is spent hacking CSS files.  I am using the RadMenu extensively and have doctored up our own skin using the Default skin as a template.  I've only done minor customizations to the CSS since the default is so close to our corporate standards of look-and-feel (changes only to color).

The issue I am having is with the separator.  No matter what I try, I cannot get the separator to show up in IE6.  I have Firefox installed locally for debug purposes and the separator shows up just fine.  I have not changed the separator styles in any way from the original.  I looked through the forums and saw that the Vista skin had a somewhat similar issue, so I created a png of the divider from a screenshot and tried embedding that into the CSS.  Again, I could get it to show up in Firefox but not IE.  The spacing of the menu is correct (you see the space where the dividing line SHOULD be, but not the line itself).

Since I'm relatively new to the controls, I am out of ideas.  I could go without using the dividers if I have to, but the menus we are using are pretty extensive and the dividers will aid the users visually in a big way.  If there are any ideas, I would appreciate the assistance.  I'm not attaching any code because everything being used regarding the dividers is the Default skin out of the box.

Thanks in advance,
Doug

3 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 27 Mar 2009, 10:10 AM
Hi Doug,

We tried to reproduce the reported issue using the latest version of the control, but to no avail. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

All the best,
Paul
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Doug
Top achievements
Rank 1
answered on 27 Mar 2009, 01:27 PM
Paul,

I actually figured it out.  I'm not sure if this is an intended behavior, a bug, or just me not reading the documentation well enough, but here is the solution.

I was building the menu manually through source view, not with the menu builder in design mode.  When I put the separator menu items in, I marked the "IsSepartor" attribute to "True" but I did not include a "Text" attribute.  I mistakenly thought that the "Text" attribute was not necessary when marking a menu item as a separator.  When I switched to the menu builder, it showed the items using "Text" attributes like "i1", "i2", etc.  I gave each item a "Text" attribute of "Separator" and then the lines magically appeared in IE6.

Again, not sure if this is intended or just me, but that was a bit confusing since Firefox, Safari, and Opera displayed the line correctly but IE6 did not when omitting a "Text" attribute and setting the "IsSeparator" attribute equal to "True".  I'm unable to install IE7 or IE8 on my machine, so I couldn't test the behavior in those environments.

Either way, problem solved.  Thanks for looking into it.

Doug
0
Doug
Top achievements
Rank 1
answered on 27 Mar 2009, 01:57 PM
As a follow-up, I had another pesky issue with this, so I'm putting the information out there in case anyone else has the problem.  IE6 wasn't displaying the line even if I had a "Text" attribute that was blank.  I actually had to have text in the "Text" attribute.  That introduced another problem.  I was seeing dotted dashes before the line and I found I could actually scroll over the dashes if I was very careful and had a steady hand and select the dashes as if they were text.  When I pasted what I copied into a text editor, it actually pasted the text I had put in the "Text" attribute on the menu item.

To fix that, I added a "color" attribute on the two CSS classes dealing with the separators and made that color the same color as the line itself.  That completely fixed the problem.  I suppose you could still select the text, but there are only a few available pixels on which to do that, so it would be very difficult unless you were actually trying.

I should also note that we have a pretty stringent IEAK script on our network since I work in the financial division, so some of these issues may only apply to Verizon Wireless (or any other network that is violently locked down)...but, in case anyone else has the problem, this is my solution.

Regards,
Doug
Tags
Menu
Asked by
Doug
Top achievements
Rank 1
Answers by
Paul
Telerik team
Doug
Top achievements
Rank 1
Share this question
or