Resetting a specific vendor-prefix issue with Javascript or Jquery?

JavaScript
1

Hi. 4 different web browsers (Firefox, Chrome, Edge and Safari) display quite different proximities between list-style-types and their adjacent data (like text or images).

The proximity between list-style-types and adjacent data is very wide in Chrome. Too much for me actually, and here is an example:

Do you know a way to reset all of these proximities to a single value with JS or JQ, in a similar fashion of resetting CSS properties ?

2

Hi,

I assume you are controlling the margins and padding which browsers use for the marker spacing.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul.standard {
	margin:0;
	padding:0 0 0 1em;
}
</style>
</head>

<body>
<ul class="standard">
  <li>This is a list</li>
  <li>This is a list</li>
  <li>This is a list</li>
</ul>
</body>
</html>

Browsers do vary slightly with the size of the bullet but the above looks pretty much the same across firefox chrome and IE.

If you want ‘perfect bullets’ then use a background-image instead of the list marker and then all browsers will be the same.

3

I was thinking no JavaScript would be needed for this.
That is, why use JavaScript to reset CSS instead of simply resetting the CSS?

Anyway, I’m wondering if there is a RTL text-align thing happening here too that is causing a problem.

4

Mittineague I don’t want to reset the CSS via JS but to somehow reduce the proximity with it (if it’s even possible).

It seems the proximity comes from this user-agent setting that I can’t revert from my stylesheet as the user agent seems to me to be loaded last in the hierarchy…

5

You don’t need JS for this really… a common way to address such x-browser inconsistencies is to include a reset CSS on top of all your other styles, and then style everything to your liking by hand.

6

But I tried to reset the closest options for li items (margin/padding) and no change was seen. This seems not to be a li margin/padding issue.

7

Hm, then there’s something else going on… can you send us a live link, or reproduce the problem on jsfiddle or something? Anyhow, it’s almost certainly not a vendor-prefix issue…

8

I saw later on, in this thread regarding a similar problem that you already visited my homepage from my profile here and reported you recognize a strange css beahvior for li items there and suggested it might be due to RTLness.

9

There is no default margin/ padding on the li element. It is the ul element that has margin/ padding applied and where you need to control it from as mentioned in my previous post.

A demo would help greatly:)

10

It seems the problem was due to list-style-position (outside/inside). Fixed.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.