Positioning the nav tree

[Kitten4u]

bump

[Tumbleweed]

Kitten4u,

I did ask a couple previous posts back if the difference was just a few pixels and when you didn't say yes or no, I assumed it wasn't that. Anyway, if  you want to pm me your whole css style sheet (much easier that way for you) and the nav tree portion, that is if you made changes in the template, I can throw it on a test site and see if I can fix or find the problem. If you made no changes to the template then that part isn't necessary. Up to you if you want to do that.

[Kitten4u]

Everything's been PMed to you

[Tumbleweed]

Jun 28, 2015 9:13:16 GMT -8 Kitten4u said:

Everything's been PMed to you

Thanks and I forgot and replied in the pm rather then in this thread so check your pm's. I'll post here from this point on, though,  if I find anything that is causing the problem.

[Kitten4u]

Either or is fine by me.  I'll be watching both.  I just check this board a few times a day, so I might reply late sometimes (as I have been).

[Tumbleweed]

I did find this in your css...

.ui-menu ul {margin-left: 156px; margin-top: 56px; width: 200px;}
.ui-menu ul ul {margin-left: 358px; margin-top: 85px;}

....which isn't in the default menu where I could see. On my other unaltered test site all the menu items either start with #nav-tree or .popup_html

I removed that and it improved everything cross browser and straightened out those odd ball things going on in different browsers like I mentioned in my pm, so it is now like how ProBoards has theirs as far as positioning. Sub-menus slightly overlapping a couple pixels on the left side and just a pixel or two higher on each submenu. So if the sub-menus are positioned consistently for you, we should be able to do a tweak (once I find where) to move the sub-menus down and is should be good cross browser. Just need to know if they are consistent in their positioning before I do anything else.

[Kitten4u]

Yep, that was the code I mentioned in my first post that I tried and wasn't working. I kept it there so whoever helped me here could see it because it seemed strange to take it out when I copy/pasted it into the OP.

It has been removed now, and it is indeed just overlapping slightly on every menu

[Tumbleweed]

Jun 30, 2015 4:06:19 GMT -8 Kitten4u said:

Yep, that was the code I mentioned in my first post that I tried and wasn't working. I kept it there so whoever helped me here could see it because it seemed strange to take it out when I copy/pasted it into the OP.

It has been removed now, and it is indeed just overlapping slightly on every menu

I kind of thought that was what you posted in the first thread but was too lazy to go look and initially, I thought that was default coding you were just editing.  Anyway, remove that part and here is my solution and it is working good on my test site and cross browser, logged in or out. The bolded part is what you'll need to add right below the green part. (You already have the green part but don't have the positioning stuff I added/edited) 

.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; top:-58px!important; left:-3px!important;}
.popup_html .ui-menu ul ul { display: none; z-index: 9999; position: absolute; top:-88px!important; left:-158px!important;}

[Kitten4u]

I'm not sure why it's doing this on my site and not yours, but it's being all funky.  The sub-menus are overlapping each other when you hover over them, and the sub-boards ul is going off the page to the left.  This happens logged in and logged out for me.

Attachments:

[Tumbleweed]

Jun 30, 2015 15:45:20 GMT -8 Kitten4u said:

I'm not sure why it's doing this on my site and not yours, but it's being all funky.  The sub-menus are overlapping each other when you hover over them, and the sub-boards ul is going off the page to the left.  This happens logged in and logged out for me.

Did you put that bolded line right below that green line and remove that other bit we talked about a few posts back? If you did then I don't know why either but you should still be able to use those two lines to position things. The green one positions your board menus and then the bold does the subs of boards. Get your board ones positioned first and then the subs.

[Kitten4u]

I did.  Here's what all the .popup_html code looks like now in case I  missed something:

.popup_html ul { display: none; list-style-type: none; background-color: #4e272a; border: 2px solid #e5c871; }

.popup_html li a { display: block; padding: 4px 10px 4px 5px; margin: 0 1px 0 2px;}

.popup_html li, .popup_html .ui-menu li { border: 1px solid #4e272a;}

.popup_html li:hover, .popup_html .ui-menu li:hover { background-color: #3a2126; border: 1px solid #351719;}

.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }

.popup_html .ui-menu a { overflow: hidden; max-width: 550px; }

.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }

.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; top:-58px!important; left:-3px!important;}

.popup_html .ui-menu ul ul { display: none; z-index: 9999; position: absolute; top:-88px!important; left:-158px!important;}

.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }

.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }

.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }

.popup_html li.state-selected > a { font-weight: bold !important; }[code]

[Tumbleweed]

Kitten4u,

Instead of me going through each line to see if it is the same here is just the nav tree part:



/* Navigation Tree + Participated Button + News Bar */

@nav_tree_color: @container_text_color_1;

@nav_tree_font: .8em @default_forum_text_font_family;

@nav_tree_decoration: none;

@nav_tree_background_color: @container_background_color_1;

@nav_tree_border_width: 1px;

@nav_tree_border_style: solid;

@nav_tree_border_color: @container_outer_border_color;

@nav_tree_border_radius: 5px;

@nav_tree_hover_color: @container_text_color_1;

@nav_tree_hover_font: @nav_tree_font;

@nav_tree_hover_decoration: none;

@nav_tree_hover_background_color: @container_highlight_color;

.recent-threads-button, #navigation-tree { height: 20px; }

.recent-threads-button.new .new-icon { display: block; }

#navigation-tree { overflow: hidden; width: 100%; margin: 0px; border-bottom: 2px solid #e5c871; padding-bottom: 5px;}

#nav-tree {display: inline;}

.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }

#nav-tree ul { display: none; list-style-type: none; }

#nav-tree > li { display: inline-block; height: 25px; }

#nav-tree > li a { display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }

#nav-tree > li:first-child a { margin-left: 2px; }

#nav-tree .ui-menu { display: none; position: absolute; float: left;}

#nav-tree .ui-menu li { white-space: nowrap; padding: 2px 10px 2px 5px; }

#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }

#nav-tree .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }

#nav-tree .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }

#nav-tree li.new_span > a > .new-icon { float: none; display: inline-block; }

#nav-tree li.state-selected > a { font-weight: bold !important; }

.popup_html ul { display: none; list-style-type: none; background-color: #4e272a; border: 2px solid #e5c871; }

.popup_html li a { display: block; padding: 4px 10px 4px 5px; margin: 0 1px 0 2px;}

.popup_html li, .popup_html .ui-menu li { border: 1px solid #4e272a;}

.ui-menu ul {margin-left: 156px; margin-top: 56px; width: 200px;}

.ui-menu ul ul {margin-left: 358px; margin-top: 85px;}

.popup_html li:hover, .popup_html .ui-menu li:hover { background-color: #3a2126; border: 1px solid #351719;}

.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }

.popup_html .ui-menu a { overflow: hidden; max-width: 550px; }

.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }


.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute;top:-58px!important;left:-3px!important;}


.popup_html .ui-menu ul ul { display: none; z-index: 9999; position: absolute;top:-88px!important;left:-158px!important;}


.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }

.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }

.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }

.popup_html li.state-selected > a { font-weight: bold !important; }





[Kitten4u]

I obviously didn't copy something right because that code works great.  I just needed to adjust a couple of numbers to get it to do exactly what I wanted.

Thank you so much for your help!

[Tumbleweed]

Jun 30, 2015 19:41:55 GMT -8 Kitten4u said:

I obviously didn't copy something right because that code works great.  I just needed to adjust a couple of numbers to get it to do exactly what I wanted.

Thank you so much for your help!

Good, glad to hear it and i did check your site just now on IE, Chrome and FF and it looks good. Do be careful though setting the left position because you get one pixel space between the board and sub board and the subboard will go away as you cross that empty pixel space.

Just wanted to add, I'll leave your coding on my test site for another day and then take it all off but wanted to leave it for a bit just in case some little thing crops up. I appreciate you pm'ing all that coding. Made it much easier to find a solution. You were actually on the right track with what you posted in that first thread.

Edit: Removed coding.