Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Solpart menu IE/FF gaps and separator itemSolpart menu IE/FF gaps and separator item
Previous
 
Next
New Post
5/31/2006 6:11 AM
 

Dear DNN-Guys

Like I've promised here I'm back.
First I've looked back to my answer yesterday.
I've covered it out if my answer in point 4 :: is correct. And yes it is.
I've looked at a new installation of dotnetnuke version 4.0.3.
I've add a new page after the home page and I've logged in as Host.
What did I see? (only things that give the layout) of the (Root)MenuItem.

<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MainMenu_MenuBar MainMenu_MenuItem" savecss=" " saveselcss="">
    <td title="" nowrap="NOWRAP"><img src="spacer.gif"><img alt="*" src="breadcrumb.gif" border="0">Home&nbsp;
    </td>
 </tr>
 </tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MainMenu_MenuBar MainMenu_MenuItem" savecss="" saveselcss="">
    <td unselectable="on" title="" nowrap="NOWRAP"><img src="spacer.gif">&nbsp;Testpage&nbsp;
    </td>
  </tr>
  </tbody>
</table>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MainMenu_MenuBar MainMenu_MenuItem" savecss="" saveselcss="">
    <td title="" nowrap="NOWRAP"><img src="spacer.gif">&nbsp;Admin</td>
    <td class="spmrarw MainMenu_RootMenuArrow" align="right"><img src="menu_down.gif" alt="&gt;">

    </td>
  </tr>
  </tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MainMenu_MenuBar MainMenu_MenuItem" savecss="" saveselcss="">
    <td title="" nowrap="NOWRAP"><img src="spacer.gif">&nbsp;Host</td>
    <td class="spmrarw MainMenu_RootMenuArrow" align="right"><img src="menu_down.gif" alt="&gt;">
    </td>
  </tr>
  </tbody>
</table>
</td>
  <td width="100%"><img src="spacer.gif"></td>  
</tr>

First
Because the Home page have not a submenu there is only one <td></td> tag in the table (the RootMenuArrow is not necessary).
After the name of the Home page there is a &nbsp;. This give difficulties in some cases.
The </td> tag is not in the same line (in the line under the line of the Name of the MenuItem (Home). This give certainly a gap which renders different
in IE and in FF.

Second
Because the Testpage have not a submenu there is only one <td></td> tag in the table (the RootMenuArrow is not necessary).
Before and after the name of the Testpage there is a &nbsp;. This give difficulties in some cases.
and the </td> tag is not in the same line (in the line under the line of the Name of the MenuItem (Testpage). This give certainly a gap which renders
different in IE and in FF.

Third
Because the Admin page have a submenu there are two <td></td> tags in the table (the RootMenuArrow is necessary).
All the elements in the first <td></td> are located at the same line. That is correct.
Before the name of the Admin page there is a &nbsp;. This give difficulties in some cases.
The second </td> is not placed at the same line as the <img src="menu_down.gif" alt="&gt;">.
It is placed not on the first line under the Name of the page (like the other pages) but on the second line under the line of the MenuItem. This is certainly because I had selected the page Admin > Pages when I looked at the code.
This give certainly a gap which renders different in IE and in FF.

Fourth
Because the Host page have a submenu there are two <td></td> tags in the table (the RootMenuArrow is necessary).
Before the name of the Host page there is also a &nbsp;. This give difficulties in some cases.
The second </td> is not placed at the same line as the <img src="menu_down.gif" alt="&gt;">. This give certainly a gap which renders different in IE
and in FF.

In my following feedback I look at the MenuBreak.
  Was it useful?... Please give this item a rate.


Vriendelijke groeten
Gilbert Vanden Borre
 
New Post
5/31/2006 9:11 AM
 

 

That is excellent analysis Gilbert keep it coming.

I have run into that problem with having a closing TD cell on a different line before. That is something that I'm going to be more conscious of now.


DotNetNuke Modules from Snapsis.com
 
New Post
5/31/2006 1:59 PM
 

Dear DNN-guys

Before I give some explaination about the MenuBreak look at the rendering of the code of a working menu with different parts (only things that give the layout).
For a good understanding I've gived the following names for the different classes.

Settings Own Settings Default Settings



RightArrow ArrwRght.gif breadcrumb.gif
DownArrow ArrwDown.gif menu_down.gif
rootbreadcrumbarrow RtMnItBrArrw.gif No default value
submenubreadcrumbarrow SuMnItBrArrw.gif No default value
leftseparator <![CDATA[<img title="" alt="" src="RtMnItLeSeNo.gif" />]]>
leftseparatoractive <![CDATA[<img title="" alt="" src="RtMnItLeSeAc.gif" />]]>
leftseparatorbreadcrumb <![CDATA[<img title="" alt="" src="RtMnItLeSeBr.gif" />]]>
rightseparator <![CDATA[<img title="" alt="" src="RtMnItRiSeNo.gif" />]]>
rightseparatoractive <![CDATA[<img title="" alt="" src="RtMnItRiSeAc.gif" />]]>
rightseparatorbreadcrumb <![CDATA[<img title="" alt="" src="RtMnItRiSeBr.gif" />]]>
rootmenuitemlefthtml <![CDATA[<img title="" alt="" class="RtMnItLeHtml" src="/--path--/RtMnItLeHtml.gif">]]>
rootmenuitemrighthtml <![CDATA[<img title="" alt="" class="RtMnItRiHtml" src="/--path--/RtMnItRiHtml.gif">]]>
separator <![CDATA[<img title="" alt="" src="RtMnItMiSprt.gif" />]]>
submenuitemlefthtml <![CDATA[<img title="" alt="" src="/--path--/SuMnItLeHtml.gif">]]>
submenuitemrighthtml <![CDATA[<img title="" alt="" src="/--path--//SuMnItRiHtml.gif">]]>



separatecss true true
userootbreadcrumbarrow true true
useskinpatharrowimages true false
usesubmenubreadcrumbarrow true false
usearrows true true



menubarcssclass MnBar MainMenu_MenuBar
menucontainercssclass MnCntr MainMenu_MenuContainer
menubreakcssclass MnBreak MainMenu_MenuBreak
menuiconcssclass MnIcon MainMenu_MenuIcon
menuitemcssclass RtAndSuMnItNo MainMenu_MenuItem
menuitemselcssclass RtAndSuMnItHo MainMenu_MenuItemSel
rootmenuitemcssclass RtMnItNo No default css class
rootmenuitemselectedcssclass RtMnItHo No default css class
rootmenuitemactivecssclass RtMnItAc No default css class
rootmenuitembreadcrumbcssclass RtMnItBr No default css class
submenucssclass SuMnCntr MainMenuSubMenu
submenuitemactivecssclass SuMnItAc No default css class
submenuitemselectedcssclass SuMnItHo No default css class
submenuitembreadcrumbcssclass SuMnItBr No default css class
menurootarrowcssclass RtMnItArrw MainMenu_MenuRootArrow
menuarrowcssclass SuMnItArrw MainMenu_MenuArrow



leftseparatorcssclass RtMnItLeSeNo No default css class
leftseparatoractivecssclass RtMnItLeSeAc No default css class
leftseparatorbreadcrumbcssclass RtMnItLeSeBr No default css class
separatorcssclass RtMnItMiSprt No default css class
rightseparatorcssclass RtMnItRiSeNo No default css class
rightseparatoractivecssclass RtMnItRiSeAc No default css class
rightseparatorbreadcrumbcssclass RtMnItRiSeBr No default css class


I use this classes because they says more than the name of the classes that are used in the documentation.

[1 :: First MenuBreak]
<tr> 
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td class="RtMnItLeSeAc"><img alt="leftseparatoractive" src="RtMnItLeSeAc.gif"></td>
  </tr>
  </tbody>
</table>
</td>
[2 :: First MenuItem with a submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItAc" savecss="RtMnItAc" saveselcss="RtMnItHo" style="">
    <td title="Home" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif"><img alt="*" src="RtMnItBrArrw.gif" border="0">Home<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
    <td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt="&gt;">
  
    </td>
  </tr>
  </tbody>
</table>
</td>
[3 :: MenuBreak betweek first and second menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td class="RtMnItRiSeAc"><img alt="rightseparatoractive" src="RtMnItRiSeAc.gif"></td>
    <td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
    <td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
  </tr>
  </tbody>
</table>
</td>
<td>
[4 :: Second MenuItem with a submenu]
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
    <td title="Organisatie" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Organisatie<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
    <td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt="&gt;">

    </td>
  </tr>
  </tbody>
</table>
</td>
[5 :: MenuBreak betweek second and third menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
    <td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
    <td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
  </tr>
  </tbody>
</table>
</td>
[6 :: Third MenuItem with a submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
    <td title="Engineering" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Engineering<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif"></td>
    <td class="spmrarw RtMnArrw" align="right"><img src="ArrwDown.gif" alt="&gt;">

    </td>
  </tr>
  </tbody>
</table>
</td>
[7 :: MenuBreak between third and fourth menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
    <td class="RtMnItMiSprt"><img alt="separator" src="RtMnItMiSprt.gif"></td>
    <td class="RtMnItLeSeNo"><img alt="leftseparator" src="RtMnItLeSeNo.gif"></td>
  </tr>
  </tbody>
</table>
</td>

[8 :: Fourth MenuItem (and last) no submenu]
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
  <tr class="spmbar spmitm MnBar RtAndSuMnItNo RtMnItNo" savecss="RtMnItNo" saveselcss="RtMnItHo">
    <td title="Klanten" nowrap="NOWRAP"><img src="spacer.gif"><img alt="rootmenuitemlefthtml" src="RtMnItLeHtml.gif">Klanten<img alt="rootmenuitemrighthtml" src="RtMnItRiHtml.gif">

    </td>
  </tr>
  </tbody>
</table>
</td>
[9 :: Last MenuBreak after fourth menuitem]
<td class="spmbrk MnBreak">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td class="RtMnItRiSeNo"><img alt="rightseparator" src="RtMnItRiSeNo.gif"></td>
  </tr>
  </tbody>
</table>
</td>

[10 :: Last MenuBreak after fourth menuitem]
<td width="100%"><img src="spacer.gif"></td>  
</tr>

In this example you can see:
The &nbsp; before the Name of the menuitems are not there... That's why I've eleminated this in de solpart.js script.
But you can also see that I've not elimated the returns in the second td-tag... for the menuitems. Take a close look...

You can also see that I've used a name for each element that is easy to understand (also the same name for the gifs as for the elements).

As we look now closer to the MenuBreak then you can see the difference between the Menubreaks.

1 :: have only one separator. The first menu is active. The RtMnItLeSeAc occurs.
3 :: have tree separators.
  The first is right from the first menu and is active because this separator belongs to the first menu. RtMnItRiSeAc occurs.
  The second is the separator between the two MenuItems. I've named it RtMnItMiSprt (RootMenuItemMiddleSeparator)
  The third is left from the second menu and is not active this separator belangs to the second menu. RtMnItLeSeNo occurs.
5, 7 are the same.
9 :: have only one separator at the right side of the last menuitem.
10 :: is a supplementary td-tag so that the items comes together.

As you can see with these menuitems you can make fine rootmenus... tabsmenu's ...
Of course I must examine the submenu... Another day perhaps... As you wish it?...

  I hope this was usefull.


Vriendelijke groeten
Gilbert Vanden Borre
 
New Post
6/1/2006 2:09 PM
 

Dear DNN-guys

I've checked out what gaps there are when you have a &nbsp; or a return.
And this is the result.
This result is the same in IE as in FF.

All the </td>-tags have a line-height of 14px;
1-2-3-4-5 NBSP no return before the </td>-tag
                     
1-2-3-4-5 spaces no return before the </td>-tag.
 
1-2-3-4-5 NBSP + a return and the </td>-tag at the following line
                     
1-2-3-4-5 NBSP + two returns and the </td>-tag at two lines under the content
                     
1-2-3-4-5 spaces + two returns and the </td>-tag at two lines under the content.
 
The same as above with not text then you can see that there is always a one pixel height between two </td>-tags
                     
 
                     
                     
 
  I hope this will help

Vriendelijke groeten
Gilbert Vanden Borre
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Solpart menu IE/FF gaps and separator itemSolpart menu IE/FF gaps and separator item


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out