Hi!

I have a really wierd problem which I'm hoping someone can help me understand what's wrong.

My SolPartMenu doesn't seem to react to either the CSS class border ("border: 1px solid yellow;") or margin ("margin-right: 1px")

What I'm trying todo is to create a 1px space between the different menu items/links. I'm solved the border issue using a small "hack" skinning the TD instead with .MainMenu_MenuItem td { border: 1px; }

Any ideas to where to look for this "bug"? Why isn't my SolPartMenu listening to my border and margin CSS commands.


Info:
4.x.x DNN installation
Using the dnnMENU .ascx tag
All SolPartMenu CSS have been placed within the Portal.css file /0/Portal.css

Thank you in advance

regards
- Johan

Johan,

When you look at the solpart menu in detail you will see that the classes are located at the TR level. This is what a single menu item in one of my own skins looks like (using the FF extension "view source chart"):

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr id="tddnn_dnnMENU_ctldnnMENU327" onmouseover="m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU'].onMBMO(this);" 
         onmouseout="m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU'].onMBMOUT(this);" 
         onclick="m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU'].onMBC(this, event);" 
         onmousedown="m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU'].onMBMD(this);" 
         onmouseup="m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU'].onMBMU(this);" 
         class="dnn_dnnmenu_ctldnnmenu_spmbar dnn_dnnmenu_ctldnnmenu_spmitm g0menubar g0menuitem g0rootmenuitem" 
         savecss="g0rootmenuitem" saveselcss="g0rootmenuitemsel" 
         menuclick="document.location.href='http://yourdomain.nl/yourpagename/tabid/327/Default.aspx';" style="">
         <td unselectable="on" title="" align="left" nowrap="NOWRAP"><img src="/images/spacer.gif">YourPageName</td>
</tr></tbody></table>
 
As you easily can, if you use your "hack" (which btw is quite OK), the style definition takes precedence over others, hence it applies. 
 
Personally, I do not know an other way to easily apply a top or bottom border. Another option is to simulate a border with a background image.
 
Peter

---

Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.

Hi guys!

Thanks for you replies, but I solved it like this.

First I had to add .MainMenu_MenuItem td classes for all the menu classes in order not to have the top "td" class definition of MenuItem apply to the below ones. So the setup became like 6 standard CSS classes for the menu, then 6 new ones with TD definitions. Hehe.

For separation I just used the separator="  " on the dnnMENU ASCX controller.

Best way I could solve it. I would rather have used margin: 5px; but it didn't apply either on TD or CSS class level.