3 (or more) columns - uneven

[Stinky666]

From the code below, you can see I have 18 lines of text for the columns. I would have hoped (and want) it go go 6 | 6 | 6. It'd make the most sense. If I had only 16 bits of text, I would have assumed it'd go 6 | 6 | 4
If there was 11, I'd expect it to probably either go 4-4-3 or 5-5-1

For some reason, it's going 6 | 7 | 5 and no matter how many are in each column, it cuts off previous for the first line my "background" for the numbers (see image):

So in that, you see in Column 1, it has a bit of the top from the second column's "55" background, and then the 3rd column does the same from column 2's last one.

How do I make it distribute evenly ? Is there a simple height or row element I can add?


<li style="display: block; background: #e1e1e1; margin: 100px 0 0 -150px;">
   <h1 style="background: #E1E1E1 url('https://www.imageupload.co.uk/images/2017/04/07/crissXcross.png'); margin-top: -1.5em; padding: 0.35em 1.6em; font: normal 1.8em UbuntuRegular, Arial, Helvetica, sans-serif; color: #CE507F;">My Title</h1>
   <ul style="margin: 1em 0; padding: 0em 4em; list-style: none; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;-webkit-column-gap: 2.5em; -moz-column-gap: 2.5em; column-gap: 2.5em; -webkit-column-rule: 1px solid #191919; -moz-column-rule: 1px solid #191919; column-rule: 1px solid #191919;">
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">22</i> My Text 01</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">26</i> My Text 02</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">33</i> My Text 03</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">35</i> My Text 04</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">40</i> My Text 05</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">45</i> My Text 06</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">55</i> My Text 07</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">60</i> My Text 08</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">63</i> My Text 09</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">66</i> My Text 10</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">77</i> My Text 11</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">80</i> My Text 12</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">89</i> My Text 13</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 10px; border-radius: 4px; color: #191919; margin-right: 5px;">99</i> My Text 14</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 6px; border-radius: 4px; color: #191919; margin-right: 5px;">100</i> My Text 15</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 6px; border-radius: 4px; color: #191919; margin-right: 5px;">101</i> My Text 16</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px 12px; border-radius: 4px; color: #191919; margin-right: 5px;">??</i> My Text 17</li>
     <li><i style="font-style: normal; font-weight: bold; background: #CE507F; padding: 3px; border-radius: 4px; color: #191919; margin-right: 5px;">2000</i> My Text 18</li>
   </ul>
 </li>

[Former Member]

Do you have a link ?

I cannot reproduce the error you are seeing.
It might be an issue with the parent container causing it to display how it is.


6-6-6

[Stinky666]

Apr 10, 2017 7:29:57 GMT -8 @synthtec said:

Do you have a link ?

I cannot reproduce the error you are seeing.
It might be an issue with the parent container causing it to display how it is.


6-6-6

View Attachment

No link, however, in the example above, I removed it from all other coding and placed it by itself, and it did it.
The site I am using it on says: You may use some HTML tags(a p i strong b u ul ol li h1 h2 h3 img font br).

(it's for a bio page)

[Chris]

codepen.io/anon/pen/rmBavw

Aside from the lack of a parent <ul> or <ol> for the outer <li> nothing in that markup jumps out

You would probably need to provide a bit #moreinfo than what has been provided so far because right now it's like running into the police station to report a crime but when asked for the address of the crime scene (so evidence can be collected) the address field is left blank.  There is no way to get to the location to take fingerprints, collect shell casings, calculate trajectories, analyze blood spatter, etc.

An exact address allows for the collection of clues describing the abnormal behaviour such as cascaded rules, HTML structuring and possible client-side codes and how they all interact and those would most likely leave a trail leading to the culprit. If divulging the address would amount to compromising national security then use something to capture as much detail as possible so the crime scene can at least be recreated and in the case of a unpublished HTML (think preview in PB admin panel) the HTML source of the frame or tab would be perfect for that.

[Stinky666]

Chris, that's not the whole code, just one section. I will show the entire code, but I need to edit/remove sensitive (all lol) information first of the person's (it's on an 18+ website - which is also why I can not show the link). I will do this soon because it's truly pissing me off.

Before I do edit and post it though, I do have some H1s inside of the UL, which of course CodePen shows as being wrong (which I am not disputing). I think that's pretty much all. I can't remember if I have a UL inside of a UL, too.... but they are the only 2 things/but surely should nto cause the above to happen?
The only other thing I see that could be the problem is the website is for a users BIO, and allows only basic HTML/CSS:
"You may use some HTML tags(a p i strong b u ul ol li h1 h2 h3 img font br). Do not block the site navigation or display IP statistics of visitors."


I will replace the info I have on the persons coding, with lorem ipsum, for the exact amount of lines (not words)

[Stinky666]

Ok so, I said it was annoying me, so I have done it..

---

Link to CodePen with the code: codepen.io/stinky666/pen/rmavgL
(I think I removed everything - I hope so lol)


An image of how it does, and should look on the site in question, minus the problem I am having (it looks a lot different on CP compared to the site):
i.imgur.com/ZTLutvPg.png
(NOTE: the first and second images should look the same as the last one, but my full page screen capture tool captured it like this, presumably because of them being fixed positions)

[Former Member]

Your i tags are collapsing in on each other. Set their display to inline-block and add some margin to the bottom

The reason it looks funky in Codepen is because the first ul has lots of margin, presumably because it is positioned relative to a container on your page.

[Stinky666]

Apr 14, 2017 8:43:06 GMT -8 @synthtec said:

Your i tags are collapsing in on each other. Set their display to inline-block and add some margin to the bottom

The reason it looks funky in Codepen is because the first ul has lots of margin, presumably because it is positioned relative to a container on your page.

Wow that fixed it (kind of) with the i tags! By kind of it's removed the chopped of background parts, and it's now 6/6/6 but it's still got a gap above and below, so they are not aligned correctly: i.imgur.com/9bG5cVE.png
Column 1 = gap above the first text etc, column 2 and 3 is below the 6th one.

But yes, the UL needs margin to be -150 otherwise it has a massive gap on the left side, which is a lot of space to not use:
i.imgur.com/VbLxeff.png
If you compare that to the above image I posted, you should see the difference.


But my god, thank you <3

[Former Member]

No worries,

just make sure your margins are consistent.

i{ display: inline-block; margin: .1rem; }

[Stinky666]

Apr 14, 2017 9:48:14 GMT -8 @synthtec said:

No worries,

just make sure your margins are consistent.

i{ display: inline-block; margin: .1rem; }

Ok great I have done that thank you, (I added .1em .375em and removed margin-right) and it has fixed it. The strange thing though, if I add .1em .375em to the LAST one in the last column it makes it go back out of whack, like it currently is. So I have to have no top/bottom margin, but that's fine, it works like that.

I tried using a PX converter to EM, because I noticed half my stuff was PX and the other half was EM. The converter would say different to what the site seems to use/want. For example the first margin in my UL was -150px for the left, in the converter ( pxtoem.com/ ) it says that would be -10em, but I had to use -12em for it to be how I needed - same with everything else, but I got it how I needed/want


This was truly annoying me though so I really do appreciate the help/fix.

[Former Member]

That's because pxtoem calculates the conversion based on a base number, which is usually 16px

Check your font size on the body tag, it may be smaller. If it is smaller, use that value as the base number on pxtoem.com


I actually wrote a less mixin for proboards forums, that converts pixels into either em(used for text size) OR rem(used for padding/margin) if you want to copy/paste and start using on your forums.


/**
* converts a pixel value into either EM or REM units
* the function needs to be called inside a selector as
* that is where it will be scoped to.
* it will return the value into @_unit
**/
.pxToUnit(@pixels, @unit: em, @base:16px)
 when(ispixel(@pixels)){
    @_unit: unit((@pixels / @base), @unit);
}

/**
* TEST
**/

selector{
 .pxToUnit(32px); //call the function
 font-size: @_unit; // return value from function = 2em
}


If your base number is not 16px, you can change it explicitly in the function call


selector{
 .pxToUnit(32px, rem, 14px);
 padding: @_unit;
}



[Stinky666]

Apr 14, 2017 10:32:41 GMT -8 @synthtec said:

That's because pxtoem calculates the conversion based on a base number, which is usually 16px

Check your font size on the body tag, it may be smaller. If it is smaller, use that value as the base number on pxtoem.com


I actually wrote a less mixin for proboards forums, that converts pixels into either em(used for text size) OR rem(used for padding/margin) if you want to copy/paste and start using on your forums.


/**
* converts a pixel value into either EM or REM units
* the function needs to be called inside a selector as
* that is where it will be scoped to.
* it will return the value into @_unit
**/
.pxToUnit(@pixels, @unit: em, @base:16px)
 when(ispixel(@pixels)){
    @_unit: unit((@pixels / @base), @unit);
}

/**
* TEST
**/

selector{
 .pxToUnit(32px); //call the function
 font-size: @_unit; // return value from function = 2em
}


If your base number is not 16px, you can change it explicitly in the function call


selector{
 .pxToUnit(32px, rem, 14px);
 padding: @_unit;
}



Ahhhh ok. I saw that 16px was the base on the website, so I thought/assumed it was the "global" base. So this makes a lot more sense.