Box borders don't line up?

[TrultToast]

Originally Posted by Seven Skins

I don't see that on your site.



You cannot insert table in ol or ul lists... as mentioned earlier warp the table in li tag or move the table out of ol tags.

Just moved the table out of the ol tags and placed it above them.
The problem still exists.

Apparently this problem also exists with the "nonthread" class on the forumdisplay template when there are no posts in the forum.
Ugh..

[TheLastSuperman]

Hey everyone, don't forget about the css calc ability .

Try changing the template code to this:

<ol id="forums" class="floatcontainer" style="max-width:calc(100% - 2px) !important;">

See if that does it. I hate using style= in any css call, I prefer to define any css changes in the actual definition but sometimes when you customize a style or theme from another software a direct inline edit is required else you'll pull your hair out trying to figure out where you went wrong along the way lol.

So by saying go 100% we will but then we tell it to remove the spare 2px we noticed it increased. By using max-width we told it not to be bigger than 100% but somewhere as you can all plainly see something else bumped it up, I'd imagine some additional padding added somewhere along the line while you were customizing your style.

[MarkFL]

Originally Posted by TrultToast

Thanks for explaining. I was about to ask that question too, lol.
Any chance you could help me fix my forumhome template too? Sorry to be a bother... I tried using the code you supplied above in a few spots but I had no luck in fixing the borders in my statistics box.

Borrowing on Mike's suggestion, add this to your "additional.css" template:

#info {
	width:calc(100% + 2px) !important;
}

This will make the statistics box 2px wider, rather than making the forums boxes 2px narrower. Either way will work though.

[TrultToast]

Thank you very much Mike and Mark!
When I tried Mikes suggestion. It sadly did nothing, but when I did what mark suggested and put Mikes code in my additional.css file under the class "#info", it did work.

Thank you both very much again!

edit:
Just out of curiosity, is there a reason why I need to keep adding this to some of my boxes? Like what did I do wrong to make 100% not work correctly without adding "width: calc(100% + 2px) !important;"??

[Seven Skins]

Originally Posted by TrultToast

Just out of curiosity, is there a reason why I need to keep adding this to some of my boxes? Like what did I do wrong to make 100% not work correctly without adding "width: calc(100% + 2px) !important;"??

Because vBulletin did not use Box Sizing whilst developing the forums hence we have issue. When you add borders to an element it get added to the element e.g. if you have 100px square element and you add 1px border the resulting box size will be 102px x 102px.

More info here: .. https://css-tricks.com/box-sizing/

[TheLastSuperman]

^ Also to further elaborate on what Seven Skins was explaining in regards to adding borders... if you add a border to an element that did not have it prior, it can cause any sub-elements or those who "used to" share a similar css definition appear differently hence what SevenSkins was explaining with the now its 102px wide comment above but now similar areas will look smaller as they were not adjusted. In the past I've went so far as to trace down all the other elements and added in:

border: 1px solid transparent !important;

So the other elements would then line up properly, especially in drop-down style menus where on hover the menu item shifts slightly but I do not recommend that at all, only in "it must be done" scenarios. Remember to always try proper css first i.e. CSS Class/ID + CSS Definition instead of for example in my previous reply above style="codehereforcss" because doing something properly and especially in html/css can mean the difference between something looking right and more so acting right! Also don't forget to check in all major browsers when you're done "tweaking" because typically Internet Explorer just doesn't jive etc the point being attempt it proper first, only "make due" when you absolutely must .