View Full Version : ddlevelsmenu - minor issues on zoom and small browser width

08-22-2011, 08:38 PM
1) Script Title:
All Levels Navigational Menu (v3.0)

2) Script URL (on DD):

3) Describe problem:
I love this script, so first off a big thanks!

I came across two minor issues that I'm not sure really qualify as "bugs" since it would be fairly rare for them to show up.

1. If you zoom into the browser (i.e. everything is displayed at bigger than 100%), some sub menus with only one entry will not show the bottom border in the right spot, and the side borders will extend past the bottom border.
In your example site, zooming in will remove the right border.
Here is my example page:
If you zoom in in FF, you see the side borders extend down too far (see the CALENDAR menu), in Chrome the right border disappears.

2. If the browser window is small and the menu too wide, the "overflow: hidden" line will effectively make part of the menu inaccessible. What is the reason to hide the overflow here?

I thought I knew the reason to 1. - I have manually set the height of a few elements of the menu so I can display another part of my navigation directly below the menu, effectively touching it. But when I remove my height definitions, there are still issues with zooming, e.g. a slight empty space between the top menu and the sub menu, and the side borders extending.

I recently looked into the whole issue with screen pixels and css pixels (when zooming in), and I probably understand the basics now, but that doesn't mean I know how to implement that into my code...

Any thoughts on how to handle the zoom issue?

Thanks again!

08-23-2011, 07:37 AM
Just sharing some initial thoughts on 1) as far as the Chrome issue. I'm inclined to think this is a CSS (versus script) issue. If I add a 1px padding to the right edge of the main menu bar DIV, that seems to fix the issue of the disappearing right border:

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;

visibility: hidden;
z-index: 1000;

08-26-2011, 08:44 PM
I finally had a chance to try this.
It works while zoomed in, but when I zoom back out, both Chrome and FF show a white line on the right when I hover the mouse over it...