Background images underneath borders

Explorer positions a background-image underneath the border of the element. Therefore it's impossible to get the position of a background image in an element with a border correct in all browsers.

Test page. Workaround is not included.
Reported by ppk.

Explorer 5-6 Windows, Explorer 7, Explorer Mac | Reported on 22 December 2004.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.

Search reports by browser:

Atom RSS


(Add your own)

1 Posted by Tino Zijdel on 22 December 2004 | Permalink

Giving the element a height or width (or use the 'Holly-hack') solves the problem. This is one of the many 'hasLayout'-related bugs in IE.

2 Posted by ppk on 24 December 2004 | Permalink

Thanks Tino, that solves it in Explorer Windows, but not, unfortunately, in Explorer Mac.

Test page updated.

3 Posted by Geoff Richards on 9 January 2006 | Permalink

Wow, after lots of trial and error I found this, and added one rule that made everything work:

div { display: inline-block }

which also triggers the hasLayout thing. But I've only tried it in IE6 so far.