Background images underneath borders

Atom RSS

This site heavily relies on bug reports created by its readers. Anyone can report a bug and be published.

Main navigation:




Search reports by browser:

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 beta 2, Explorer Mac | Reported on 22 December 2004.

Comments

(Add your own)

Posted by Tino Zijdel on 22 December 2004

1

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.

Posted by ppk on 24 December 2004

2

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

Test page updated.

Posted by Geoff Richards on 9 January 2006

3

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.

Post a comment

Commenting guidelines:

  1. When quoting specs, articles or your own research, please include a URL of the document.
  2. Test your stuff. When reporting browser behaviour, make sure that your report is correct.

Yes