HI!
I have been having this annoying issue with my templates where the text inside of a content box is breaching the edge and bleeding into the padding ever so slightly.
For reference, here is the CSS found in the content box in question:
Yet despite both padding-left and padding-right being equally 25px, there is a slight bleed into the right hand padding as seen below:
Note that this seems to be happening across more than one of my templates, so I assume there's something I've done in error and need to fix. (I copy-paste my code from one template to the next since I am still fairly new to CSS)
Any ideas would be greatly appreciated! And if you would like to Inspect the code live here is my tester profile:
Please excuse the mess, it is still a very rough in-progress.
Thank you!
I have been having this annoying issue with my templates where the text inside of a content box is breaching the edge and bleeding into the padding ever so slightly.
For reference, here is the CSS found in the content box in question:
Quote:
#charcontent {
position: absolute;
top: 0px;
left: 1000px;
height: 1170px;
width: 800px;
clear: both;
font-family: Quicksand;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;
overflow: hidden;
overflow-y: scroll;
scrollbar-height: 750px;
background: #1F2427;
color: #E3EAE2;
border-top-right-radius: 3%;
border-bottom-right-radius: 3%;
}
position: absolute;
top: 0px;
left: 1000px;
height: 1170px;
width: 800px;
clear: both;
font-family: Quicksand;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;
overflow: hidden;
overflow-y: scroll;
scrollbar-height: 750px;
background: #1F2427;
color: #E3EAE2;
border-top-right-radius: 3%;
border-bottom-right-radius: 3%;
}
Yet despite both padding-left and padding-right being equally 25px, there is a slight bleed into the right hand padding as seen below:
Note that this seems to be happening across more than one of my templates, so I assume there's something I've done in error and need to fix. (I copy-paste my code from one template to the next since I am still fairly new to CSS)
Any ideas would be greatly appreciated! And if you would like to Inspect the code live here is my tester profile:
Please excuse the mess, it is still a very rough in-progress.
Thank you!
Oh geeshe, I totally missed this, I'm so sorry!
The solution should be a simple one: apply box-sizing:border-box; to the parent container.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
It's always good practice to set box-sizing to border-box in all your CSS, Kim has applied this to the default CSS on the site for groups and profiles, so ideally you'll re-add it if you override/don't use the existing styles.
The solution should be a simple one: apply box-sizing:border-box; to the parent container.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
It's always good practice to set box-sizing to border-box in all your CSS, Kim has applied this to the default CSS on the site for groups and profiles, so ideally you'll re-add it if you override/don't use the existing styles.
Moderators: Sanne