I just upgraded a project I have from the previous version of RAD Controls from 2008 Q3 to 2009 Q1. It seems to have broken the menu item on my page but I'm really not sure why. The to different version seem to render the identical html, but they do not render the same anymore. I think this may have something to do with the new sking format but I really dont have a clue. I have code behind that add and id parameter to the anchor tag of each menu item (to access them from some javascript). I have also added a css class to each menu item to center the text of the menu item in the anchor tag. The version of my page using the newer control will not center the text.
below if the html rendered by each of the controls
<!-- 2008.3.1314.35 -->
<ul class="rmHorizontal rmRootGroup">
<li class="rmItem rmFirst" style="width:19%;"><a href="#" class="rmLink menuItem ActiveNav" id="navHome"><span class="rmText">Home</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navAbout"><span class="rmText">About Us</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navLearn"><span class="rmText">Learn</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navShare"><span class="rmText">Share</span></a></li>
<li class="rmItem rmLast" style="width:19%;"><a href="#" class="rmLink menuItem" id="navGetStarted"><span class="rmText">Get Started</span></a></li>
</ul>
<!-- 2009.1.311.35 -->
<ul class="rmHorizontal rmRootGroup">
<li class="rmItem rmFirst" style="width:19%;"><a href="#" class="rmLink menuItem ActiveNav" id="navHome"><span class="rmText">Home</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navAbout"><span class="rmText">About Us</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navLearn"><span class="rmText">Learn</span></a></li>
<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navShare"><span class="rmText">Share</span></a></li>
<li class="rmItem rmLast" style="width:19%;"><a href="#" class="rmLink menuItem" id="navGetStarted"><span class="rmText">Get Started</span></a></li>
</ul>
</div>
and the menuItem css class I added
/* Navigation */
.menuItem, .menuItem a, .menuItem a span, .menuItem a:hover
{
color: silver;
cursor: pointer;
font-family: arial;
font-size: 12pt;
outline: none;
text-align: center;
text-decoration: none;
}
.ActiveNav
{
color: White;
font-weight: bold;
}
Any ideas as to why the controls are rendering totally different with the same html and css file? There is no skin selected so I didn't think it had to do with the new skin css format.
Thanks,
Robert