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, ...Help with menu?Help with menu?
Previous
 
Next
New Post
10/31/2009 11:04 PM
 

Thanks for your help...  I did do major editing of that template, and there really isn't all that much that is left of the original, most of which is in the menu area. *grin*

It is a strange problem, I wrote the skin for one site of mine, and it worked great, I tested it in every browser I could get my hands on and it displays correctly every time.  I did notice the extra spacing you were talking about when I first got the template, but after a lot of editing it disappeared.  Once I got done with it, I put it on another portal (it was a host-level skin), and noticed this problem with the first/last items in the menus.  I looked back at the other portal, and it was still displaying correctly, in the same browser but in a different tab.  Right now I have it on three portals, and two of them are acting up while the third appears to work fine.

The rounded-glossy corners in this menu are nothing fancy, they are basically just a background image showing a rounded edge inserted into a  table cell.  I played around with the width quite a bit, and it appears to be correct.  The problem appears to be the background image of the menu, where in the first and last items they are shifted to the left about 50 pixels.  When I remove the "norepeat" option of the menu CSS, it does tile out to the full 150 pixels, so I know the width is okay.  In addition, any menus titles that are too long extend past the background image, right out to the full 150 pixels. 

Then, I narrowed the problem down to the first, last and firstlast items of the CSS menu by removing those sections from the CSS.  When those sections were removed, the menu displays properly, the only thing different is that the top and bottom items don't have the rounded corners (which makes sense, since that was what I removed).

I tried many different tests with the suggestions you gave with no success.  But, I think that was mostly because the suggestions you gave were in regards to the menu (table) width, which is actually working correctly.   I did change the overall width from 160 a few times, but that had no effect either.  The .txt class (and a couple of others) is being applied to those menu items, but since it is also being applied to the rest of the menu items (that display correctly) I don't think that is the culprit either. 

I didn't get too far with the Firefox plug-ins because it displays correctly in that browser, but it does show me that the menus are being rendered in the browser with X/Y coordinates, so I'm wondering if there is a bug in the software that is applying the wrong offset.   I'm running 5.1.2 right now, I'll try upgrading to the newest release and see what happens.

 

 
New Post
11/1/2009 1:51 PM
 

No luck, upgrading the server side didn't help (didn't really think it would).  I could shift the image to the right, but then on those browsers that did display it correctly it would be messed up in the other direction.

So... Is there a known fix for this?  I've run out of ideas of what to try.

 

 
New Post
11/3/2009 3:44 AM
 

Definitely try looking at this with Firebug in Firefox.  The inspect feature won't allow you to highlight a submenu item initially, but if you use it to click on a root item that has a submenu, you'll be taken to the spot in Firebug's html view, from there you can click on the table row in Firebug's html view and it will bring up your css and the css class cascade.  From there, check padding.  I do know that the child indicator arrow td column was left in even though it's now empty - the arrow was moved into the actual menu item text td as a background image.  That column can be a pain when it comes to padding because there is no class assigned to it and padding that gets applied to it from other classes on the tr can really mess things up.  I don't know for certain if that applies here or not.  It may be that the background image for first and lasts is applied to the second td and not the third which would leave an empty space like you have if that were the case.  I've taken to setting padding explicitly to zero for the submenu .mi's etc and setting padding and margins only on the .txt and .icn classes in the submenu because of this third td that's always empty yet takes padding and margins from I believe the .mi class.

Wish I had an answer for you other than just further trial and error.  At least Firebug will allow you to make some edits directly to the web page to get immediate results without having to edit the skin.css directly and allow you to see the exact classes being applied and inherited.  Firebug is definitely a must have tool if you are doing anything with a skin.


JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

New Post
11/3/2009 11:52 AM
 

Thanks!  That definitely gives me something to work with, I'll test all that out tonight and let ya know.

 
New Post
11/3/2009 1:59 PM
 

You mentioned Firefox displays correctly, and I forgot that.  IE8 and the IE Developer Toolbar will help to a certain degree, too.  Firebug is generally so much better for inspecting the menu items, you can click on the htlm view window and then go back and hover the menu and see whatever is highlighted in the Firebug view is also outlined in the dropdown.  Not sure IE's dev toolbar will do that, but it would also be very useful in your endeavor here.


JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Help with menu?Help with menu?


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