Tuesday 13 July 2010

CSS background-position not applied

Had a weird issue with a CSS sprite this morning where both IE8 and Firefox ignoring the background-position style. After stripping the component back to bare bones, the style started working as expected; I was momentarily stumped until a co-worker spotted the fact I didn't have any units specified for the x and y coordinates. Adding px to each coordinate resolved the issue.

    background-image: url(Buttons.png);
    background-position: -10px -70px;
    width: 143px;
    height: 30px;

Doh! That's what I get for copying code from the internet! Maybe something to do with the nesting or inherited styles? Who knows…

In related news, I also noticed the IE Dev Toolbar in IE8 is inclined to display additional styles seemingly appended to the background-image style. This is a minor annoyance in terms of being able to manipulate the appended style but it seems to be a bug with the toolbar, not IE as the styles are applied correctly.

IE Dev Toolbar Background Image Style

No comments:

Post a Comment

Spam comments will be deleted

Note: only a member of this blog may post a comment.