Bullet points not lining up

Highlighted
HubSpot Employee

 

We are having some difficulty with aligning the bullet points on the following page. We are using property "text-indent" to do so, but the problem is different browsers renders the styling differently. For e.g. the bullet line up in Chome if I set "text-indent: -2em;". While for Internet Explorer, "text-indent: -1.4em". Is there anything that we can change to make it such that it looks consistent across browsers? 

 

For now, we found out that using px values help make it look better but it is still not a perfect alignment. 

  

Code snippet:

.hs_cos_wrapper_type_rich_text ul {

padding-left: 0px;
list-style-position: inside;
list-style-type: disc;
font-size: 18px;
line-height: 23px;
padding: 0 18px;

}

.hs_cos_wrapper_type_rich_text ul li {

margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-indent: -22px;

}

 

Thanks in advance!

 

attachment1_Training_Dashboard___Isolite_Systems_and_Training_Dashboard___Isolite_Systems.png

Reply
0 Upvotes
3 Replies 3
Highlighted
Esteemed Advisor | Partner

@jtoh,

 

You could remove the need for text indentation entirely by doing the following:

 

First add a little more padding to your li and set it's postion to relative:

.hs_cos_wrapper_type_rich_text ul li {
margin: 0 0 0 1em;
padding: 0 0 0 2em;
position: relative;
}

I added an extra em as an example.

 

Next remove list styling from your ul:

.hs_cos_wrapper_type_rich_text ul {
padding-left: 0px;
list-style-position: inside;
list-style-type: disc;
font-size: 18px;
line-height: 23px;
padding: 0 18px;
list-style: none;
}

Now add a before element to the list item that is the bullet.

.hs_cos_wrapper_type_rich_text ul li:before {
    content: '\25CF';
    position: absolute;
    left: -1em;
    top: .5em;
}

basically, what I did here was use the hex code for a round circle as the content of the "before" sudo element on the li. I set the position to absolute and set the left position to to -1em (your li pading is 2em, so set it to negative half of your padding), and set the top to have of 1em (assuming that your line height is 1em, this would place the bullet half way down your first line of text. adjust for different line-height). You can change the size of the circle by using font size on the before sudo element, as well as give it it's own color if desired.

 

You can also use any number of shapes as bullets this way, including using any fontawesome icons.

 

The main benefit in your case is that now your text will butt right up against the edge of the li while the bullet no longer sits inside the li (now sitting -1em outside the left side of the li). This means you do not need to use the text indent property and from what I have seen this is pretty solid across all browsers.

Reply
0 Upvotes
Highlighted
HubSpot Employee
HubSpot Employee

Hi @jtoh,

 

I would handle this by removing the padding and text indent on your li element:

.hs_cos_wrapper_type_rich_text ul li {
    margin: 0 0 0 1em;
    text-align: left;
}

and then removing the list-style-postion on your ul element:

.hs_cos_wrapper_type_rich_text ul {
    padding-left: 0;
    list-style-type: disc;
    font-size: 18px;
    line-height: 23px;
    padding: 0 18px;
}

List-style-position is used to define whether your list markings (bullets, discs, etc) appear inside your document flow or not. By setting it to inside, you are saying that you want it to be treated as a 'relative element' which causes it to align to the left of your ul container. If you don't specifiy, it, it will by default beconsider outside of your document flow. More info can be read here.

 

After making those two changes you should be left with a page that looks like this:

 Screen Shot 2017-07-13 at 9.24.55 AM.png

 

Hope this helps!

-- Ty

Reply
0 Upvotes
Highlighted
Occasional Contributor

Working on this with @jtoh 

It worked! Thanks so much.

Reply
0 Upvotes