Navigation Bar issue >:|

[Cryptaline]

It is s very specific problem. I have this issue only with a profile tab, inbox & alerts tab.

As you can see on a screen below:


(First 2 pieces - main page, 2 others - profile , inbox & alert pages)

On a main page (index.php) everything looks ok, but when im switching to the tabs i ve mentioned, style is broken. Everything looks not as i wish it 2 look. Probably its a problem with these properties:

.Popup .PopupControl.PopupOpen,
.Popup.PopupContainerControl.PopupOpen

What i need, its just to correct tab styles on each page. However, if you do smth with properties eg padding margin etc, it may correct profile tab, inbox & alerts tab but will broke the index.php page tabs style.

Could you give a lil tip how to fix this issue.
Thank you.

 

[Cryptaline]

I might be wrong here, but I think your problem is here:

.navTabs .navTab.selected.PopupOpen .navLink {
color: #737373;
background-color: #F9F9F9;
padding: 5px;
margin-left: -1px;
border-right: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
}

Change the padding: 5px; to padding: 5px 15px 5px 15px;

Nope, definitely not this one. Because this is what will happen then:




As i said, prob i need to set this property to 0. But then i need to find where else i can add padding: 5px; because its still broken.

 

[Cryptaline]

Or some sleep, if you been at it for 2 days

Ya, but the thing is, that it's a lil bit hard to go sleep when you know that u cant fix a very easy issue!

 

[MagnusB]

Which browser are you using? For me, it displays absolutely correctly now, though there seems to be an issue with the drop down positioning, but it corrects it self when it is finished:



I also figured out the positioning error, it is a margin in two places:

.navTabs .navTab.PopupClosed .navLink {
color: #AAA;
padding: 5px 15px 5px 15px;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
margin-left: -1px;
}

And:

.navTabs .navTab.selected.PopupOpen .navLink {
color: #737373;
background-color: #F9F9F9;
padding: 5px 15px 5px 15px;
margin-left: -1px;
border-right: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
}

Also see the border there, that is double defined:

.Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
color: #737373;
background-color: #F9F9F9;
padding: 5px;
margin-left: -1px;
border-right: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
}

That causes an offset of 4px or so (my math is poor right now) between open and closed.

 

[Cryptaline]

I'm using a big bro, Chrome. Yup the issue definitely also somewhere else out of the

.Popup .PopupControl.PopupOpen,
    .Popup.PopupContainerControl.PopupOpen

 

[MagnusB]

lol, so I am, strange we are getting different results. Let me just go through the steps I do in the developer tools to get the result I showed above:
1. In:

.navTabs .navTab.selected.PopupOpen .navLink {
color: #737373;
background-color: #F9F9F9;
padding: 0px;
margin-left: -1px;
border-right: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
}

Change the padding (or just delete it, it will inherit) to: padding: 5px 15px;

2. In:

.Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
color: #737373;
background-color: #F9F9F9;
padding: 0px;
margin-left: -1px;
border-right: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
}

Delete the borders, they are double defined, both on the li and the a, you only need them one place. You can also delete the padding rule here, if you want to optimize a bit.

3. ?????

4. Profit



I can also swear that the drop down is like one pixel to far to the right after my changes, so try to add margin-left: -1px; to this rule:

.Menu {
font-size: 11px;
background-color: white;
margin-top: 1px;
border: 1px solid #DBDBDB;
border-top-width: 0px;
border-bottom-width: 1px;
overflow: hidden;
min-height: @menuMinheight;
min-width: 200px;
position: absolute;
z-index: 7500;
display: none;
}

As for the publicTabs, here are the correct paddings:

.navTabs .navTab.PopupOpen .navLink {
padding: 5px 15px;
}

 

[Cryptaline]

I ve done everything like you said, triple checked it. All tabs looks as they must look, however (>xD) the profile tab is only the one who don't care (its not going out of its own nest, even more now its trying to be tiny as hell, all other tabs on all pages are on their places) about my changes:

I would give to it a custom image like this for its own mind lol:

 

[Cryptaline]

Yay prob i ve solved the issue. A few more addition changes required. You ve mentioned about doubled -1 margin properties, need to change it also.

 

[Cryptaline]

Thx MagnusB, you ve helped alot
If its possible could you check the result? Just in case, is everything now appear properly?

 

[MagnusB]

Yeah, I just logged on to your site, cause I didn't see that you solved it, and just spent a while trying to reproduce..... It seems it is solved now, at least I can't see anything acting up

 

[Cryptaline]

Hehe, good. Well now i can rest a bit from a nav section ><, then will fix issue with margin properties. Thank you again!