How to Change the HELP Link in the Header into a Drop-Down Menu for Non-Users???

[Lynne]

Didn't you get the CSS from an existing dropdown or did you make up all the CSS yourself? I thought you got it from an existing dropdown and thought you should compare that.

Else, there are similar tools to firebug for other platforms, so look into using that to compare things.

[NashChristian]

Originally Posted by Lynne

Didn't you get the CSS from an existing dropdown or did you make up all the CSS yourself? I thought you got it from an existing dropdown and thought you should compare that.

Else, there are similar tools to firebug for other platforms, so look into using that to compare things.

Yes, I got the CSS from the Notifications drop-down menu in the header. It worked perfectly for "logged-in" users. I didn't have to change anything there. I've just been struggling to duplicate it for the "logged-out" users.

To style the drop-down for logged-in users, all I had to do was add the 'nonotifications' class to my parent list tag:

<li class="popupmenu nonotifications">

[NashChristian]

Originally Posted by NashChristian

Thanks Lynne, that worked!

I still can't figure out how vB is styling the line... I can for the NavTabs, but I can't for the header links. The only styling I'm aware of for the global header links with a drop-down menu is for the <li class="popupmenu nonotifications"> which works fine for the Logged-In users without tweaking, but doesn't work for the Logged-Out users.

I've been testing this in Firefox with the Firebug plugin, and had been logged into my AdminCP in IE while testing, so I just now saw how this looks in IE when Logged-Out, and there is an extremely noticeable problem in IE8:



For some reason IE is displaying a large gray block below each list item. I have specified no padding and no margin. This isn't displaying in the other browsers, and this doesn't display in IE when Logged-In either. I don't know what is causing this to display in IE when Logged-Out. I'm not even sure how to proceed with debugging it, since it is only visible in IE. I tried using the IE developer tools, but that didn't seem very intuitive.

Here is the code I'm currently using:

.toplinks ul.nouser a.popupctrl, .toplinks ul.nouser a.popupctrl:hover, .toplinks ul.nouser a.popupctrl:active {
background: {vb:stylevar navbar_tab_background.backgroundColor} url("images/misc/arrow.png") no-repeat scroll right center;
padding-right: 15px;
padding-left: 4px;
}

.toplinks ul.nouser li.popup a {
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-bottomright:0;
    background:none repeat scroll 0 0 #FFFFFF;
    border-top: 1px outset;
    clear:none;
    color:#000000;
    float:none;
    line-height:26px;
    height:26px;
    font-size:11px;
    margin:0;
    padding:0 5px;
    text-align:left;
}

.toplinks ul.nouser li.popup:first-child a {
    border-top:0;
}

.toplinks ul.nouser li.popup a:hover {
    background:{vb:stylevar imodhilite_backgroundColor};
    color: {vb:stylevar navbar_selected_popup_body_a_Color};
    text-decoration: underline;
}

I realized that you can't compare the Logged-In versus the Logged-Out versions without registering a user name, so I setup a temporary test account so you can Log-In:

WEBSITE
Username: Test
Password: 123456

Please take a look at it and let me know what you think is going on here.

Thanks for all the help!
Jeff

I spent a FULL day working on this today and STILL can't figure it out!

I've tried Firebug for IE, and it doesn't even allow you to select the element with the gray block. I've tried using a negative bottom margin:

.toplinks ul.nouser li.popupmenu ul.popupbody li.popup a{
	margin-bottom: -13px;
}

Which ALMOST works in IE... it pulls out the gray block, however, it sucks up the bottom border of the list so that it's actually behind the list itself. The other problem with this method is it screws up the display in every other browser. I've tried adding the code to the replacement-vbulletin-ie.css or the vbulletin-ie.css, so it will only run the code if the browser is IE, however I can't get that to work for some reason.

I don't get it!
At this point, I don't care if this is styled exactly the same as the other navbar drop-down menus (with a 1px border all the way around), but I can't even get that to work correctly. Apparently the css is designed for those only to work in the navbar, not the header.

I'm about to pull my hair out. Does anyone have a suggestion about how to get this to work and display correctly???
Thanks...

[Lynne]

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

[NashChristian]

Originally Posted by Lynne

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

So HOW do I fix this only in IE without affecting the other browser displays?

I tried hard-coding:

style="margin:0; padding:0;"

On the parent <ul> in addition to each line of the <li> but it didn't make any difference at all. This seems to only be an issue in IE, but I don't know how to fix it.

Thanks for the help

--------------- Added [DATE]1286041505[/DATE] at [TIME]1286041505[/TIME] ---------------

Originally Posted by Lynne

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

I could KISS YOU! THANK YOU LYNNE!

I found this little snippet in my 'vbulletin-chrome' template:

.toplinks ul.isuser .popupbody li {
	display:block;
	float: none;
	clear: none;
	padding:0;
	margin:0;
}

I changed it to this:

.toplinks ul.isuser .popupbody li, .toplinks ul.nouser .popupbody li {
	display:block;
	float: none;
	clear: none;
	padding:0;
	margin:0;
}

It worked like a CHARM!

DANG! That was hard to find!

Thanks for all your help Lynne!

Now I can get back to what I wanted to work on 3 days ago!
Jeff

[Lynne]

Glad you finally got it to work.