Background Image Positioning Bug | May 3, 2005
A few months ago I was building a navigation menu using a list. I’d created a nice little arrow bullet which I wanted vertically centred and indented by 10 pixels. Pretty simple stuff I though, I’d just do something like this.
background: url(images/arrow.gif) no-repeat 10px center;
However when I checked, neither Safari or Netscape were displaying the image. I played around a bit and realised that these browsers refused to display the background image if I mixed units with keywords â€“ something that’s allowed in the spec. This wasn’t a huge problem as I could simply do this:
background: url(images/arrow.gif) no-repeat 10px 50%;
So I noted the issue down and promptly forgot about it.
All the versions of Netscape I tested failed to display a background image when I mixed keywords and units in the background property. The same was true for Opera 7. Opera 6 however displayed the background image but incorrectly centred it horizontally. Older version of Safari also displayed the bug, but it seems to have been fixed in the latest release.
Using the background-position property proved slightly better.
background: url(images/arrow); background-repeat: no-repeat; background-position: 10px center;
Safari 1.2 now displayed the background image correctly as did Netscape 7.2. Netscape 6.2 and 7.1 along with Opera 7 displayed the image but didn’t try to position it.
It’s not a particularly interesting or important bug, and is one that’s easy to avoid by not mixing keywords with units. However I thought I’d mention it just incase anybody comes across the same issue and wants a bit of a sanity check.
Posted at May 3, 2005 9:28 PM