Box borders don't line up?

[TrultToast]

Howdy!

I seem to have a problem where a few boxes don't exactly line up right even though they are both at 100%.

Here is an example of the problem:
https://vborg.vbsupport.ru/external/2016/12/9.png

The blue box on top doesn't line up with the rest of the threadlist and the threadlisthead seems to be missing the bottom right hand corner of the border... I honestly have no idea how to fix this. :confused:

[MarkFL]

If you can post a link to your site, I might can tell you what CSS to add to remedy the issue. :)

[TrultToast]

If you can post a link to your site, I might can tell you what CSS to add to remedy the issue. :)

Sorry for the late reply... I was having computer issues.
Here you go: https://boards.rottensquash.com/

I've also noticed the issue on my forum homepage in the box that shows the stats. :erm:
Also don't mind all the spam posts, I was just testing something, haha.

[MarkFL]

Try adding this to your "additional.css" template:

#thread_inlinemod_form div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

[webmastersun]

Try adding this to your "additional.css" template:

#thread_inlinemod_form div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

what do these codes mean?

[MarkFL]

what do these codes mean?

The issue seemed to be that the custom style used by the OP is a mix of table and div elements. I found that by making the borders of the div elements display on the inside rather than on the outside as they do by default, then the elements appear to be the same size.

[TrultToast]

The issue seemed to be that the custom style used by the OP is a mix of table and div elements. I found that by making the borders of the div elements display on the inside rather than on the outside as they do by default, then the elements appear to be the same size.

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.

[Seven Skins]

You are inserting a table in OL tags .. hence they don't line up.
This may work.. warp the table in LI tags and use the same class as other LI tags on the forumhome page.

[TrultToast]

You are inserting a table in OL tags .. hence they don't line up.
This may work.. warp the table in LI tags and use the same class as other LI tags on the forumhome page.
Just tired this... no luck :confused:

[Seven Skins]

I don't see that on your site.

https://vborg.vbsupport.ru/external/2016/12/1.png

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.

[TrultToast]

I don't see that on your site.

https://vborg.vbsupport.ru/external/2016/12/1.png

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 (https://developer.mozilla.org/en-US/docs/Web/CSS/calc) :D.

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]

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]

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 :D.