1) Script Title: All Levels menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
3) Describe problem: On the Edge browser the last menu item moves down a line.
http://sandhillsmoaa.com
Printable View
1) Script Title: All Levels menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
3) Describe problem: On the Edge browser the last menu item moves down a line.
http://sandhillsmoaa.com
Looks like it's fixed now?
Don't have Edge, but on any browser, if the window is too narrow the last menu item does move down a line - that is until the window gets a little narrower, at that point the alternate select drop down menu icon appears. I'm not sure how your page is determining when to do this (it can be done via media queries or via javascript), but whatever the method, perhaps you just need to make the point at which the icon takes over be a little wider.
Ah, it's in the menu script itself. You have max-width: 800px set. Perhaps 810px would be better.
It only does this on the Edge browser. It's fine on IE, Chrome, Safari.
I changed the menu max-width, but that didn't help. I tried changed the container max-width to 820 and that worked on the menu, but I didn't like the container looking so big.
I went to the ddlevelsmenu-topbar.css and changed the left margin from 10px to 0 and the margin between tabs from 2 to 1. It works, but I still don't understand why it's only on the Edge browser. I don't like that browser, but need to be sure anyone who uses it will see the proper menu.
Thank you for your help.
If it works great! . . . By way of explanation (and to offer some alternative, should that ever become desirable), different browsers adhere to different standards as regards what border, margin, padding and some other things actually mean in relation to box width, which in turn affects what they regard as the dimensions when evaluating things like width and maxwidth. You can set an element's box-sizing property in css style, but I'm not clear if doing so in this particular case would help, nor, if it would, which element(s) would need their box-sizing to be set in order to make the behavior more universal. It can come in handy though sometimes. See:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Perhaps (in an existing stylesheet for the page):
Which will set all elements to this treatment might work, it helps in many similar cases.Code:* {
box-sizing: border-box;
}