CODEWITHSUNDEEP
htmlcsshtml-lists
devi1169
devi1169

Reputation: 21

Is this <ul><li> text alignment a bug in Firefox?

Opening this simple jsfiddle in Firefox renders differently than in Chrome and other browsers.

CHROME chrome screenshot

FIREFOX firefox screenshot

I have actually been trying to make it look like Firefox in other browsers, i.e the bullet position follows the alignment of the text. Note that i'd also want the next list items to be centered, i.e not aligned based on the bullet position of the first one, see screenshot example. Anyone know a way?

I have seen answers using list-style-position: inside, but can't live with the side effect of the difference in the gap between the bullet and the text.

<ul>
  <li style="text-align: center;">Hello I'm Centered</li>
</ul>

Upvotes: 1

Views: 600

Answers (2)

jleggio
jleggio

Reputation: 1286

You could try using a pseudo element like :before instead to get the desired effect across all browsers. By setting the margin-right you can choose the spacing yourself too.

li{
  text-align:center;
  list-style:none;
}
li:before{
   content:'•';
   margin-right:7px
}

What's happening is that list-style:none hides the default bullet and by using :before you're able to add it back in as an inline pseudo element.

Upvotes: 2

Boldewyn
Boldewyn

Reputation: 82734

Traditionally browsers are rather free what exactly to do with the dot in lists. I can easily imagine situations, where Firefox’ solution results in a better rendering.

If the <li> makes trouble, move the text alignment one element farther down, i.e., add a helper element:

<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>

Disadvantage is, that you introduce an element solely for reasons of styling, but in my experience pragmatism beats purism in such an isolated case.

Upvotes: 1

Related Questions