Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 17 Dec 2016, 06:10
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
Thumbs down Box borders don't line up?

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:


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.
Reply With Quote
  #2  
Old 17 Dec 2016, 06:40
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Real name: Mark
If you can post a link to your site, I might can tell you what CSS to add to remedy the issue.
__________________
Former vBulletin.org Staff Member



Support for my products (as well as updates/new product publishing) has been moved to MHB - vBulletin Products and TAZ - Add-ons
Reply With Quote
  #3  
Old 23 Dec 2016, 23:05
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
Originally Posted by MarkFL View Post
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.
Also don't mind all the spam posts, I was just testing something, haha.
Reply With Quote
  #4  
Old 24 Dec 2016, 07:24
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Real name: Mark
Try adding this to your "additional.css" template:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Former vBulletin.org Staff Member



Support for my products (as well as updates/new product publishing) has been moved to MHB - vBulletin Products and TAZ - Add-ons
Reply With Quote
  #5  
Old 25 Dec 2016, 20:29
webmastersun's Avatar
webmastersun webmastersun is offline
 
Join Date: Oct 2013
Originally Posted by MarkFL View Post
Try adding this to your "additional.css" template:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.
what do these codes mean?
__________________
The best webmaster forum & internet marketing forum for webmasters and internet marketers.
Reply With Quote
  #6  
Old 25 Dec 2016, 20:33
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Real name: Mark
Originally Posted by webmastersun View Post
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.
__________________
Former vBulletin.org Staff Member



Support for my products (as well as updates/new product publishing) has been moved to MHB - vBulletin Products and TAZ - Add-ons
Reply With Quote
  #7  
Old 27 Dec 2016, 03:16
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
Red face

Originally Posted by MarkFL View Post
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.
Reply With Quote
  #8  
Old 27 Dec 2016, 20:33
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
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.
Reply With Quote
  #9  
Old 28 Dec 2016, 01:56
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
Originally Posted by Seven Skins View Post
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
Reply With Quote
  #10  
Old 28 Dec 2016, 10:59
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
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.
Reply With Quote
  #11  
Old 28 Dec 2016, 22:56
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
Originally Posted by Seven Skins View Post
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..

Last edited by TrultToast; 28 Dec 2016 at 23:05.
Reply With Quote
  #12  
Old 29 Dec 2016, 04:45
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Hey everyone, don't forget about the css calc ability .

Try changing the template code to this:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!
Reply With Quote
  #13  
Old 29 Dec 2016, 16:09
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Real name: Mark
Originally Posted by TrultToast View Post
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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This will make the statistics box 2px wider, rather than making the forums boxes 2px narrower. Either way will work though.
__________________
Former vBulletin.org Staff Member



Support for my products (as well as updates/new product publishing) has been moved to MHB - vBulletin Products and TAZ - Add-ons
Reply With Quote
  #14  
Old 30 Dec 2016, 05:36
TrultToast's Avatar
TrultToast TrultToast is offline
 
Join Date: Aug 2013
Real name: Felix
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;"??

Last edited by TrultToast; 30 Dec 2016 at 06:58.
Reply With Quote
  #15  
Old 30 Dec 2016, 13:38
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
Originally Posted by TrultToast View Post
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/
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 00:23.

Layout Options | Width: Wide Color: