Funny css rendering error in IE background-image has "display: block" in it

css, html, internet-explorer, styles

Solution

It only displays that way with the developer toolbar. When you make a simple span with those css attributes, it does actually display like a block element, but my developer toolbar shows the same thing yours does in your screenshot.

It is not the uppercase name (developer toolbar actually makes the display attribute uppercase), nor is the quotes around the url the problem. You can even move `display:block` to the beginning of the styles and it will still show them combined in developer toolbar

Problem

There is a funny issue with how IE is parsing/rendering my css. I have the following style defined "background-image: url(/images/leftArrow.png); DISPLAY: block; cursor: pointer;" but for some reason, IE 7 & 8 are combining background and display to make it one property (see screenshot) Any ideas? (source: infinicastonline.com)

Original source