Using <li> tags for vBulletin "Quick Links"?

[michaelbenson]

I am currently in the process of revamping my forum skin (http://www.staff-lounge.com/forums/), and have come over a small stumbling block with regards to the drop down menus for "Quick Links" within the navbar template. For some reason after the "Quick Links" link on the navbar, all the remaining links are forced to reside on the next line down. Can anyone help me out here, i am assuming that because i am using <li> tags to render the menus instead of tables that this is the main cause of the issue?

[Code Monkey]

List tags add a new line.

[Princeton]

List tags are BLOCK-LEVEL ELEMENTS.

You'll need to use CSS to change it's DISPLAY to "inline". It's a bit advanced coding so I don't recommend taking this route.

There are some tuturials and examples on how you can do this on the WEB.
The trick is to make it work on all browsers.

[michaelbenson]

List tags are BLOCK-LEVEL ELEMENTS.

You'll need to use CSS to change it's DISPLAY to "inline". It's a bit advanced coding so I don't recommend taking this route.

There are some tuturials and examples on how you can do this on the WEB.
The trick is to make it work on all browsers.
As you can see in the provided link to my forums the rest of the items within the list are all on the same line. Except the Logout button, which follows the "Quick Links" button, therefore i was assuming that this had something to do with the dropdown effect.

Here is my master CSS (http://www.staff-lounge.com/blocks/wp-content/themes/k2/style.css) file, browsing to the bottom will direct you to the #navigation definitions which are used to create the horizontal list.

I tried changing the display from block to inline but this created basically the same effect.

[Princeton]

Sorry, I don't see quick links.

[Code Monkey]

What Link? I don't see it on your site. You know that <li> tags should be wrapped in <ol> or <ul> tags. If not then it's kind of like puting tr and td without table.

If your using images then the easiest thing to do is just code them in reverse order and float:right each one and they will fall in line.

[michaelbenson]

Sorry, I don't see quick links.
Ah, sorry i forgot that they are hidden from guests. I guess i'll just extract the appropriate code;

<div id="navigation">

<ul id="submenu">
<li><a href="arcade.php$session[sessionurl_q]">Arcade</a></li>

<li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>
<li><a href="psistats.php$session[sessionurl_q]">$vbphrase[psistats_link]</a></li>
<li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li>
<if condition="$bbuserinfo['userid']">
<li id="usercptools"><a href="$show[nojs_link]#usercptools">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li>
</if>
<li><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out]</phrase></a></li>
</ul>

</div>

[Code Monkey]

vb adds that little down arrow image. I wonder if that has an effect on the list structure.

[michaelbenson]

vb adds that little down arrow image. I wonder if that has an effect on the list structure.
I have no doubt that some aspect of the javascript for creating or executing the drop down menus is the cause of the issue. Do you know of any way to actually remove this generated "arrow image"?

[Code Monkey]

I have no doubt that some aspect of the javascript for creating or executing the drop down menus is the cause of the issue. Do you know of any way to actually remove this generated "arrow image"?

No, but you might want to give up the whole <li> thing. Seems like a dead end here. ;)

[Princeton]

most likely the dropdown <ol><li> are inheriting the style from it's parent

if you want to get rid of the little "arrow image" ... I use something like this..
<span id="navbar_tools"><a href="$show[nojs_link]#navbar_tools" onclick="vbmenu_register('navbar_tools', 1)">Text Goes Here</a></span> NOTE: you will still have to edit/add styles to fit your needs

[michaelbenson]

I guess instead of using the dHTML drop down menu, configuring the list to become expandable via CSS would probally be an easier alternative.

[briansol]

Mike, I'm working on a work-around for this. I'll drop you a line when i get it together.