CODEWITHSUNDEEP
htmlcsslist
Wordpressor
Wordpressor

Reputation: 7543

Different list style type image padding in WebKit browsers

I'm trying to align css list-style-type images to parent's border.

Unfortunately, it works beautifully even in really old IE browsers, Firefox and Opera but is really messy in WebKit browsers (Chrome/Safari).

Any ideas what causes it, and any workarounds other than using background images? This is not reset.css thing, tried a few different resets and nothing seems to fix it.

Image

example

JSFiddle

http://jsfiddle.net/zzUdk/

Source

HTML

<ul>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
</ul>

CSS

ul {
    margin: 2em;
    border-left: solid 3px #999;
}

ul li {
    position: relative;
    left: 0.6em;
    list-style-type: disc;
}

(btw, Opera users, can you copy code from JSFiddle? because I can't for a good few weeks now? :()

Upvotes: 0

Views: 595

Answers (1)

Jos&#233; Cabo
Jos&#233; Cabo

Reputation: 6789

If you use:

list-style-position: inside

You will put the round inside the li element, but exactly at its start. Then you can move it where you want but I think right now it is ok.

http://jsfiddle.net/zzUdk/2/

PS: If you relay to browser this behaviour probably you will get problems. I recommend you put your own list icons the result will be much better and consistent.

Upvotes: 2

Related Questions