I have a simple list with a background image in each element. The image is showing in Firefox but no in Chrome (Windows OS). These are the styles attached to the list:
ul li
{
position: relative;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #777777;
width: 378px;
float: left;
padding-top: 6px;
padding-right: 0px;
padding-left: 30px;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
color: #575656;
line-height: 19px;
background-color: transparent;
background-image: url("../images/tir.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top 6px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
padding-bottom: 3px;
}
Can someone spot what’s wrong with this?
Fiddle: http://jsfiddle.net/kgeDr/
The code seems to work.. http://jsfiddle.net/LZKG6/
(I use Chrome in Ubuntu)
May be this is wrong:
I think the extra “6px” is invalid.
W3schools only specifies 2 values, not 3:
http://www.w3schools.com/cssref/pr_background-position.asp