IE css bug : it appends 'padding-left' to the end of 'background-image' ??

Question

Hi,
I got a weird bug.
In my .css file I have the following rule:

.conf-view a
{
    padding-left: 10px; 
    background-image: url("images/bullet-green.gif");
    background-position: center left;
    background-repeat: no-repeat;
}

The problem is that IE somehow interprets it like this:

.conf-view A /* NOTE - this is copied from the IE-Developer tools css tab. */
    background-image : url(images/bullet-green.gif); PADDING-LEFT: 10px
    background-repeat : no-repeat
    background-position : left center

See the padding-left there?
Now the browser simply ignores the padding rule, resulting in a layout failure..

Is this a known bug? can anyone find a way around it?

Thanks a lot
Kfir

Answer 1

Maybe that is because the a-element normally is an inline-element. It's not common for those elements to have background-images and paddings/margins, even though it's allowed. Put display: block; in your a-style-definition. Maybe it helps you out in this situation.

EDIT

Waiting for your sample-code :)

Answer 2

It appears to be a bug in IE Developer Tools where the display code just gobbles up the next non-background definition (sorted alphabetically, apparently) if you have background-image specified separately. Your text is not overlapping your background image on that page on either of the links, so to me it seems that the CSS is being interpreted correctly regardless; can you explain why you think that's not the case?

I have no idea how they managed to create that bug, but if you'd like for it to go away, specifying the background definitions in the shorthand seems to not exhibit that behaviour:

background:transparent url("images/bullet-green.gif") scroll no-repeat left center;

Answer 3

It appears to be the diferent way it applies background images... On saving out your code and playing with the stylesheet setting the padding to 50 moved the image and the text along so its not that its ignoring the padding, just that its dealing with the positioning of the background image differently.

funnily enough faileN's suggestion wasn't far off of what I did to fix it. If you put "display: inline-block;" then that seems to work in IE7 and FF. Of course you will want to test it has no side effects elsewhere before using it.