Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 border adding extra spacing
#
there is a random amount of padding appearing in different places on my coding. this occurs in my chrome browser. (i don't use firefox so idk if it's happening there. i use safari on my ipad and it's not happening on that browser.)

the thing is, this is happening all over my board. even on codes that are identical, in one place the padding appears and in the other, nothing at all! so i came with a simple code to prove my point. but i'll go through what all transpired below.


the example code
CODE
[dohtml]
<div style="width:150px; height:150px; background-color:#fff; border:1px solid black;">

<div style="width:150px; height:150px; background-color:red;"></div>

</div>
[/dohtml]



i noticed this happening on my board when i was creating a template (it happened in various places in my skin as well) and was distraught because i assumed it was something i was doing wrong. after checking my math over and over i finally reduced the code down to nothing but what you see above and saw it couldn't be me. the coding was fine?? but still the issue persisted.

image:
user posted image

thinking maybe it was something conflicting on my skin, i moved to my tester board with 0% of the same coding. not only was there weird padding still, it was in a different place completely?

image:
user posted image

maybe it's just me and my coding, i think. so i went to shine and dug up my old tester thread and hmmm. i get a whole new set of random padding showing up!

image:
user posted image


thinking it was just a problem with me and my eyes i guess, i asked some other people to look at the codes and they saw it was happening too. then, upon poking around, i realized it is definitely not just me this happens to. i thought at first when i saw this happening to people it was just miscoded but now i'm starting to think there's a real conflict going on with borders and jcink completely???

but if someone knows how to fix it?? i would be forever grateful because this is stressing me out.
PM
#
QUOTE (wallflower @ Jun 4 2017, 12:46 PM)
when i saw this happening to people it was just miscoded but now i'm starting to think there's a real conflict going on with borders and jcink completely???


Unlikely. But let's see if we can figure this out.

Here is the exact code, I'm inserting it here into this forum. What do you see?



In Chrome, and Firefox, I see literally a perfect 150x150 red square with a 1px solid black border. No white borders or off borders like the screenshots you show.

signature
email: admin@jcink.com :: blog: John C.
#
on my tablet, using safari, it's perfect.

on my laptop, using chrome, voila:

user posted image

John
PM
#
In that case, something in your chrome settings might be doing it? Have you tried viewing it in safe mode? If it shows up fine after that, disable any extensions you may have and re-enable them one by one until it messes up again.
PM
#
Chrome can be tricky. Here's what I'd try, in this order:

add {padding: 0} to outer div
add {margin:0} to inner div
try floating he inner div - in my experience it tends to remove any extra padding.

You can also try adding this to your coding, but I'm not sure if it relates to your specific issue:
* {-webkit-padding-start: 0px;}

signature
user posted image
#
CamilleNicole i'm not sure chrome has a safe mode but i don't use any extensions except google docs. and it's also showing up wrong to my friend and on my microsoft edge browser.

owl tried all three and no luck. http://files.b1.jcink.com/html/emoticons/sad.gif thank you for trying tho.
PM
#
I have checked:

Chrome on Windows
Chrome on iOS
Safari on iOS
Firefox on Windows

The square displays correctly for me.

It has to just be something with the way your computer renders.

Since this is a public support thread I have to ask: anyone who is on here, what do you guys see in my post? I've tested with all devices available to me at the moment.

signature
email: admin@jcink.com :: blog: John C.
#
Absolutely perfect on my end with your post. Safari, Chrome, and Firefox on Mac

signature
user posted image
#
    I am on Windows 8, and in Chrome, Firefox, and Vivaldi it looks perfectly fine.

    Per chance is your computer a Mac? Because my friend has this issue where Mac for some reason adds another pixel to some bordered elements? And I have to make small adjustments on skins and spacing when that happens.
PM
#
multiplicity! no, it's not a mac it's windows on hp.
PM
#
Yeah, I'm on Windows 10 / Chrome, and it looks as expected for me.

signature
user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll