Hello,

I have created a skin using the DNN NAV menu and cannot seem to find the correct class (or the correct set of styles) to get the menu to center in IE. The menu only spreads across the page and it does not seem to matter what I set the margins and alignment at. The menu does center in FireFox but it seems to center twice - the first time it is partially centered and then when I hover over the menu it realigns and recenters correctly.    
I have tried the following classes to no avail: 


.MainMenu_MenuItem td
{font: 1.4em Georgia, "Times New Roman", Times, serif; cellspacing: 0; }

.MainMenu_RootMenuItem
{ align: center; margin-right: auto; margin-left: auto; text-align:center; cellpadding: 0; cellspacing: 0;  }

.MainMenu_RootMenuItem td
{font: 1.4em Georgia, "Times New Roman", Times, serif;  
margin-right: auto; margin-left: auto; text-align:left;  }

.MainMenu_RootMenuItemSel td
{font: 1.4em Georgia, "Times New Roman", Times, serif; 
margin-right: auto; margin-left: auto; text-align:left; }

.MainMenu_SubMenuItemSel td
{font: 1.4em Georgia, "Times New Roman", Times, serif;}

.MainMenu_MenuContainer
{text-align: center; display: inline; margin-right: auto; margin-left:
auto; cellpadding: 0; cellspacing: 0; align: center; }  

Does anyone have an idea what I need to do to get the menu to center in IE? Also, can I adjust it so that the menu does not move when I hover over it (the first time) in Firefox?

Any help would be much appreciated.

Laura

Hello,

I haven't done that much experimentation with the NAV menu, but I am about to tackle it over the next month or so. - The techniques I use for investigating all of the classes used in the styling of any DNN element are outlined here:
Troubleshooting DotNetNuke Skins

You should be able to use those techniques to troubleshoot your menu in FF and work out the best method for centering, hope this gives you a starting point, thanks,

Thank you Lee.  I have been working with web developer tool bar for some time now and I see the css classes and styles applied but it just seems that IE is ignoring the "text-align: center" and I do not know why Firefox realigns after I mouse-over (it appears that it thinks that the spacer.gif is larger before the mouse-over.)  If I figure this out I will post the fix, in the meantime, if anyone knows of the fix could you please pass it on?

Thanks again,

Laura

Well, I got the menu to center in IE by adding a width of 50% to the CSSContainerRoot (MainMenu_MenuContainer - see below.)  So, if anyone else has this problem...


.MainMenu_MenuContainer
{ display: inline;
margin-right: auto;
margin-left: auto;
align: center;
text-align: center;
width: 50%;
}

However, the menu centers in Firefox but contains extra spaces to the left and right of each menu link.  When I hover over a link the menu then realigns and gets rid of the extra spaces (I have the hover defined the same as the menu.) It looks like it tries to leave space for an image to the left of the link - is there some way of getting rid of this non-existant image?  I tried the following:

.MainMenu_Separator { width: 0px; height: 0px; padding: 0px; margin: 0px; }
.MainMenu_MenuIcon { cursor: pointer; width: 1px; height: 1px;}
.MainMenu_MenuArrow {width: 0px; height: 0px; border: 0px; }
.MainMenu_RootMenuArrow {width: 0px; height: 0px; border: 0px; }

Any ideas for my Firefox problem?

Laura

I now have this figured out.  Just FYI, when I displayed the menu in block form the menu stopped moving around but it would not center.  When I displayed it in inline-block the menu was centered and did not move around.  I  still needed the work around for IE but now the menu displays as it should in IE and Firefox.  Now to check out Oprah...

Laura

Thanks for adding the info,

Lee