I have a menu that has finally stumped me. If anybody can point me in the right direction, I sure would appreciate it. Lee, I noticed this same problem showed up in a picture in the skinning toolkit.

The submenu has a image and when you first dropdown, I have whitespace around it. As you move your mouse, they disappear.

The site is a temp site at http://new.marconet.com and I have the solutions menu with a submenu.

TIA
Buck

Here is the code and I have attached a pic of the problem:

/***** Main Menu *****/
.MainMenu_MenuContainer {
background-color: Transparent;
}
.MainMenu_MenuBar
{
    cursor: pointer;
    cursor: hand;
    background-color: Transparent;
}
.MainMenu_MenuIcon{ display:none; }
.MainMenu_Arrow{ display:none; }
.MainMenu_RootMenuArrow{ display: none; }
}
.MainMenu_MenuItem, .submenuitembreadcrumb { cursor: pointer; }
.MainMenu_MenuItemSel
{
    cursor: pointer;
    /*background-color: #F99F00;
    color: #CD0012;
    font-family:Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:25px;
    border-right: white 2px solid;
    padding-right:25px;*/
}
.MainMenu_RootMenuItem, .MainMenu_RootMenuItem TD
{
    cursor: pointer;
    color: white;
    font-family:Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:25px;
    border-right: white 2px solid;
    padding-right:25px;
}
.MainMenu_RootMenuItemSelected, .MainMenu_RootMenuItemSelected TD
{
    cursor: pointer;
    color: #CD0012;
    font-family:Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:25px;
    border-right: white 2px solid;
    padding-right:25px;
    background-color: #F99F00;
}
.MainMenu_RootMenuItemActive, .MainMenu_RootMenuItemActive TD
{
    cursor: pointer;
    color: #F99F00;
    font-family:Verdana, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    /*border-left: red 10px solid;
    border-bottom: orange 10px solid;
    border-top: purple 10px solid;*/
    padding-top:4px;
    padding-bottom:4px;
    padding-left:25px;
    border-right: white 2px solid;
    padding-right:25px;
    background-color: black;
}
.MainMenu_MenuBreak{
 border:0px;
 padding:0px;
}
.MainMenu_SubMenu
{
  z-index: 1000;
  cursor: pointer; 
  background-image:url(SubMenu-background.gif);
  background-color: #FACB4C;
  height: 18px;
  color:black;
  font-family:Verdana, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;

  padding-top:0px;
  padding-bottom:0px;
  padding-left:28px;
  padding-right:0px;

  filter:progidXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=4);
  border:0px;
  border-color:black;
  border-style:solid;
  border-right: 1px;
}

.MainMenu_SubMenuItemSelected, .MainMenu_SubMenuItemSelected TD
{
  background-color: #C0C0C0;
  border:0px;
  border-color:#C0C0C0;
  border-style:solid;
}

/* END Main Menu */

Hello,

Can you confirm one thing for me please? - Do you wish to keep a white line in-between each of the sub menu items or do you wish to remove the white line?

Thanks,

If you wish to remove the horizontal white line, these are caused by styles in the default.css file, you need to override them in your skin.css file using:

.MainMenu_MenuItem
{
border : 0
}

- or remove the border section in the .MainMenu_MenuItem class in the default.css file.

Once you have overriden these, you also have some white lines on the right hand side, these are caused by the  .MainMenu_MenuArrow class in the default.css file, you can override them in your skin.css file using:

.MainMenu_MenuArrow {
border: 0
}

Or again delete the border code from this class in the default.css file.

I found the solution to these problems by using the techniques outlined in this tutorial:

Troubleshooting DotNetNuke Skins
(2 videos - 17min)

- It's worth a watch as it will save you a lot of time troubleshooting skins.

PS. - The skin.css file is loaded up twice, double check in your skin.htm file that you have not put a link to the css file in there. - You can see which css files are loaded using the web developer toolbar - all details in the link above.

Hope this helps,

Cheers,

Lee

Thanks Lee,

If I would have asked you first, I could have saved myself a day of frustration. Hey, there's a testimonial for you...

I also learned about the link to the css file in the html module. Never knew that. What a difference in some of my load times.

Is the proper procedure to leave the link in while you are testing and editing your html (I use FrontPage) and then remove it when you install the skin to your site?

BTW - have you ever considered converting the videos, on the site, to FLV format and allowing the ability to view online in a flash player?

I have been doing that on a couple of our sites. I can get a 35 mb wmv file down to 6mb.

Thanks again,
Buck

Hi Buck,

No problem, glad it was useful.  Yes I use that procedure. It makes it easier when testing and editing skins in a WYSIWYG editor.

The videos are in Flash format which as you say, makes them much smaller than any of the other formats. Some of the videos are available to view online in a Flash player as introductions to the tutorials, but the rest are downloadable in a zip file.  This makes it much easier for subscribers to download several tutorials at once.

Thanks, and happy skinning,

Cheers,

Lee

Lee,

What have you been using for a flash player?

I can get mine to work if I place the player and the swf file in a html page and then add it to a IFrame mod. Not very swift. Curious to know how you got a flash player to work in DNN.

TAI
Buck

hello,

I have been using a flash player that is automatically created for me by the video software I use - Captivate. - All I have to do is export the tutorial and it automatically takes care of everything.

The video tutorials that are displayed in a flash player on DNN creative are actually displayed in a separate HTML page because the dimensions of the video are so large,  you can see an example on this page:
http://www.dnncreative.com/Tutorial...fault.aspx

which links to this video page:
http://www.dnncreative.com/Games/He...fault.aspx
 
thanks,

Hi Buck,

I've just realised from reading your other post that you were talking about FLV files not flash swf files! - Doh! - The videos on DNN Creative are flash videos in the format of SWF.

- But I have used FLV files on a different website using DNN v 2 for the band that I play in. - You can't really see me - I'm on the left hand side of the stage playing bass. - But you can see me at the end dancing, holding up the swords in the middle of the line at the end of the film!
http://www.thedemonbarbers.com/defa...?tabid=164


Cheers,

Hi Lee,

I will check these files out.  Bass player huh? Blues guitarist myself.

I have had trouble getting hosts to support flv here in the states. Life goes on.

Here is a post you might be interested in.

http://www.ventrian.com/Support/Pro...aspx#16906

Have a great day and enjoy the outdoors,
Buck
justnorth.com
jivemg.com

Hi Buck,

Yes I play quite a few instruments, started on the flute and progressed to piano, electric guitar, and even did a few years of Balinese gamelan! and somehow I've ended up playing bass for the past few years.

I didn't realise there was an issue with hosts and FLV files I just uploaded them and it worked, guess I'm lucky...

Thanks for the heads up over at ventrian.com - it's appreciated,

Cheers,

Lee

Hi Lee,

Too bad we have an ocean between us. Be fun to get together and jam.

Have another question on the solpart issue. Two actually.

1. If you compare http://new.marconet.com, you will see on the first site's menu that the menu renders cleanly when hovered over (no jerkiness as the sub menu drops down). If compared to the later, same test, it does not seem to understand the 18px height that I assigned to each cell. Any thoughts?

2. Unrelated. If you compare the following:

http://www.marconet.com/VC_Solution...x and http://new.marconet.com/Solutions/V...tions.aspx

If you compare the whitespace and first black horizontal line, you will notice on the later, there is more whitespace below the solpart menu than the original page. This happens as soon as I add a text/html module for the small picture in the top, left hand corner. The image is 140x90 and lines up perfectly with the bottom of the solpart menu. If I shink the image height, then the gap between picture bottom and horizontal line image shins. But, then the image does not line up with the bottom of solpart menu.

Is this caused by DNN whitespace rendering? I am on DNN 4.3.7.

Sorry too early in the morning. horizontal line image shins - should be horizontal line image shinks

TIA
Buck

Lee, it appears that the image spacing issue can be resolved by adding ImageAlign="top" or surround it with a div tag. That is not going to work for users. They will never remember to do this. Is this resolved in DNN 4.0.1?

Hello,

Yes it would be great to have a jam! - Regarding your second problem, have you tried adding a class to the content pane where you are adding the text / html module and setting it to align to the top? - This way the user will not have to add it each time.

1. - There is something else you really need to check out first, I didn't realise this when I first looked. - View your site in Firefox, the background for the submenu does not display it is just transparent. - I would try to fix this first as it may be a related problem to the spacing issue. - The spacing issue does not occur in Firefox.

- Just having a quick look, if you remove from:

.MainMenu_SubMenu

the height, it will allow the colour to be displayed across the entire background of the sub menus, currently the height is limiting the background colour.

Have a double check of the CSS code at skinning toolkit
http://www.skinningtoolkit.com/DOTN...fault.aspx

Thanks,