Question Align the tabs to the top of the forum in every browser

[MaxLiao]

I've been manhandling my additional.css for over a day now, and I can't for the life of me figure this out - usually there is some CSS trick I can employ. And I have a funny feeling this is one of those "Duh" moments where I can't see the forest for the trees.

We want the tabs to appear flush with the top of the forums in all browsers. Currently I have this setup fine for Chrome, but I can't get it to align the same way in Firefox, I.E. and Safari ... well, I can, but then it doesn't work in the others. I was looking for a <div>, or block, or something I could attach it to via HTML or CSS, but I have failed. The folks I'm building this site for really do not want that gap there.

Is there a way to make this flush across all browsers?

Also, I'm with the poster who stated that it would be great to have the ability to turn off the "all" tab.

Thank you for the assistance!!

 

[Ozzy47]

Perhaps a screenshot of what you are trying to accomplish might help. And possibly what you are doing to get it to work on Chrome.

 

[Mokonzi]

Just taking a look at this now, I think I should have a solution for you in a few mins...

 

[Mokonzi]

Ok, this is tricky, cos it will ensure that you get this right for all your users...

You need to add this code to the additional.css template (removing anything you've already added):

li#[B]cat1[/B].forumbit_nopost div.forumhead {
	margin-top: -14px;
}

The bit in bold (cat1) needs to be just right, that has to reflect the id number of your top most forum category. If that changes for a user (i.e. that category is not visible to them) then the change won't take effect for them.

I'll have a look and see if there is a way of making it work irrespective... but test that code and let me know how it works for you.

 

[Mokonzi]

Additional suggestion here... this will only work if you only have DFT installed that uses the hooks above the forums:

ol#forums li:nth-child(2) div.forumhead {
	margin-top: -14px;
}

This doesn't work on IE8 and below.

A trick that would do for IE7 and IE8 is:

ol#forums ol:first-child + li div.forumhead {
	margin-top: -14px;
}

 

[MaxLiao]

I've implemented the first code option, and it's working. (Thank you.)

As I get further and further into the construction of this site I'll refer back and see if I need or can use the code in the last post. I have a ton of transparencies on the site, so I.E. 8 and below users are kind of left out at the moment. (My second theme will cater to them.)

I really appreciate the quick and effective assistance.

 

[MaxLiao]

So, as I stated above, this additional.css code is doing exactly what I need. (Thanks again!) And I (uh oh!) even expanded on it.

li#cat1.forumbit_nopost div.forumhead {
margin-top: -15px;

li#cat7.forumbit_nopost div.forumhead {
margin-top: -15px;

li#cat11.forumbit_nopost div.forumhead {
margin-top: -15px;​

Oh, I'll even have more later, when I get to the 1000 other forums they want created.

Based on the guidance I've been given regarding the overall layout, what users should see, and the overall effect on the site, I'm perfectly okay with managing/manipulating the categories this way via CSS.

However, this does bring up the issue of the All category. I'm sure you can image how my site (while admittedly still under construction) looks after elevating some the categories, but not others. From reading other threads I understand that (at this point in time) we cannot remove the All category, but the only option available to me is the "Defaut Tab" setting and it doesn't seem to be working. I set it to "First tab in the category" and moved the All tab to position 999, and it is still defaulting to the All tab. (I did read another user's post on this topic stating the same thing.)

So, I guess what I am asking for is either:

1. Create a setting option in a forthcoming update that would allow the tabs to naturally sit on the top of the forums.
2. The ability to remove the All option - (or kick my server in the ding-ding so the current Default Tab setting works).

Thanks again.

P.S. I understand that user permissions will alleviate some of this, but the poor admins and moderators are going to be stuck seeing a crazy mess if they are forever defaulting to the All tab.

 

[Mokonzi]

Thanks for the feedback.

Some comments on your CSS first of all...

li#cat1.forumbit_nopost div.forumhead, li#cat7.forumbit_nopost div.forumhead, li#cat11.forumbit_nopost div.forumhead {
	margin-top: -15px;
}

This will do exactly the same as your code above, but make it easier to see where you are. If you are wanting to remove the padding from every category so that they all join neatly up together, simply use this code:

li.forumbit_nopost div.forumhead {
	margin-top: -15px;
}

Regarding the tabs, I need to just check what you are referring to. The 'All' Tab is unchangeable. As you are using you can disable the display of the Category Tabs, so I assume you are referring to the 'All' Tab in what you meant.

You will find that if you have the 'All' Tab stickied it will class the as the 'first' tab if the other tabs aren't stickied. The sorting of the tabs works as follows:

First the stickied tabs are ordered first, from the lowest display order to the highest, then the unstickied tabs are ordered from the lowest display order to the highest.

There is a bug in at least the Lite version that I'm working on fixing that affects the default tab. But what is key to remember about the Default tab is that when a user first enters the forum page, they are assigned a Tab ID as well as the ID for a Category Tab. If defaults are set, then they end up with those defaults (or should do), or if no defaults are set, they end up on the 'All' Tab. From that point on, any Tab or Category Tab they look at is set in their cookies and so whenever they revisit the forum page those cookie settings are used to decide what Tabs they are shown.

Does that all make sense?

I'm currently trying to work out the best way of enabling the 'All' tab to be disabled, or at least partially disabled so that it's only used in an emergency.

 

[Mokonzi]

PS, this trick I mentioned earlier:

ol#forums ol:first-child + li div.forumhead {
	margin-top: -14px;
}

Might be the best solution to your issue, especially if you want to keep the spacing between categories. That will only work on the first category, whichever it is.

 

[MaxLiao]

Thanks for the feedback.

Some comments on your CSS first of all...

li#cat1.forumbit_nopost div.forumhead, li#cat7.forumbit_nopost div.forumhead, li#cat11.forumbit_nopost div.forumhead {
	margin-top: -15px;
}

This will do exactly the same as your code above, but make it easier to see where you are.

When I first get into creating or editing a site I always try to keep every selector coded as its own individual. I know this makes bloat code, but I only keep it this way for initial creation/troubleshooting. Once I am happy with how things are looking and I'm ready to 'commit the site to ink,' then I go in and optimize the code on my own. Maybe not the most efficient manner, but it works for me.

If you are wanting to remove the padding from every category so that they all join neatly up together, simply use this code:

li.forumbit_nopost div.forumhead {
	margin-top: -15px;
}

Nah, the space between the forums is still wanted. Just not a space between the top forum and the tabs.

Regarding the tabs, I need to just check what you are referring to. The 'All' Tab is unchangeable. As you are using you can disable the display of the Category Tabs, so I assume you are referring to the 'All' Tab in what you meant.

You will find that if you have the 'All' Tab stickied it will class the as the 'first' tab if the other tabs aren't stickied. The sorting of the tabs works as follows:

First the stickied tabs are ordered first, from the lowest display order to the highest, then the unstickied tabs are ordered from the lowest display order to the highest.

There is a bug in at least the Lite version that I'm working on fixing that affects the default tab. But what is key to remember about the Default tab is that when a user first enters the forum page, they are assigned a Tab ID as well as the ID for a Category Tab. If defaults are set, then they end up with those defaults (or should do), or if no defaults are set, they end up on the 'All' Tab. From that point on, any Tab or Category Tab they look at is set in their cookies and so whenever they revisit the forum page those cookie settings are used to decide what Tabs they are shown.

Does that all make sense?

I think so ...

I know I have my stickies set as you describe, but I'll go play around with it more once I have more user groups (and actual users) with whom to test. (I haven't even created my own test account yet).

I'm currently trying to work out the best way of enabling the 'All' tab to be disabled, or at least partially disabled so that it's only used in an emergency.

While I certainly would like the feature ASAP, (now that the tabs are aligned and working correctly across the board) I'm perfectly okay in waiting for it. Just knowing that it is on the horizon is good enough for me at this point.

PS, this trick I mentioned earlier:

ol#forums ol:first-child + li div.forumhead {
	margin-top: -14px;
}

Might be the best solution to your issue, especially if you want to keep the spacing between categories. That will only work on the first category, whichever it is.

yes ... Yes ... YES! You are [naughty word] sensational! :RpS_w00t: With as much CSS as I have played with in various vB sites, I'm pretty embarrassed I didn't even come close to figuring that out.

Once again, many thanks! I think I'm done bugging you now.

 

[Mokonzi]

While I certainly would like the feature ASAP, (now that the tabs are aligned and working correctly across the board) I'm perfectly okay in waiting for it. Just knowing that it is on the horizon is good enough for me at this point.

yes ... Yes ... YES! You are [naughty word] sensational! :RpS_w00t: With as much CSS as I have played with in various vB sites, I'm pretty embarrassed I didn't even come close to figuring that out.

Once again, many thanks! I think I'm done bugging you now.

Glad to help you matey! That code is nifty, and I only came across when searching for a solution to your problem.

Will let you know when the update is ready with the 'All' Tabs change.