CODEWITHSUNDEEP
htmlcssgoogle-chromemozilla
yogihosting
yogihosting

Reputation: 6294

List style giving different appearance in different browsers

I can't figure out why my 'list-style: disc' gives different appearance in different browser. See http://www.galadadatingandrelating.com/ under the aqua colored 'Contact Us' area there are 3 li element. -

If you want to join us sailing as an individual or a couple, at any time, contact us here.

If you have a dating and relating question/dilemma feel free to send it here. We may reply to you personally or we may cover it in a blog.

If you have a question on any of the services, packages, next sailing and exotic islands trips – feel free to ask us here.

Now they show a disc just before them in Firefox but in Chrome the disc is totally on the left.

Why does the Chrome browser show this incorrectly?

Upvotes: 0

Views: 770

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

Add list-style-position: inside; to the <li> elements:

.line-wrap ul li {
  list-style-position: inside;
}

A list example to see the problem and solution in action:

ul#one, ul#two {
  text-align:center;
}
ul#two {
  list-style-position: inside;
}
<ul id="one">
  <li>List</li>
  <li>Number</li>
  <li>One</li>
</ul>
<ul id="two">
  <li>List</li>
  <li>Number</li>
  <li>Two</li>
</ul>

from the specification about the inside:
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements. CSS 2.1 does not specify the precise location of the marker box.
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position

Explanation:
On Google Chrome the default value of the list-style-position is outside: enter image description here
On Mozilla Firefox too, it seems Firefox interprets this rule a little bit different!

Upvotes: 1

Related Questions