323636 - background-color does not apply properly to block elements when displayed inline

Status: RESOLVED DUPLICATE of bug 168232

(Core :: Layout, defect)

Description

[Ian O'Shaughnessy]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

When taking a block element like a table or div and adding "display: inline" to it's style it causes the background-color to display very strangely at the bottom of the object.

Reproducible: Always

Steps to Reproduce:
1. create a block element (ie div)
2. apply a background color
3. add content (text, whatever)
4. make the object "display: inline"
Actual Results:  
The background color gets applied only to the bottom of the element and even overlaps other elements on the page..

(here's what it looks like with "display: inline" in the style="" tag)
http://www.rave.ca/dev/bug/with_inline_tag.jpg

Expected Results:  
The background color should be applied in the same 

(here's what it looks like without the "display: inline" in the style="" tag)
http://www.rave.ca/dev/bug/without_inline_tag.jpg

I observed this on OS X version as well as XP version of 1.5

As well, i've observed this when you place a photo (even with width and height defined in the photo) in a div tag (without height and width defined) that has a background color, the background color does not surround the photo entirely as expected, instead it just covers the top most line of text. (i normally get around this by putting the photo into a table with 1 cell instead of using "div".)

Comment 1

[Steve England [:stevee]]

Can you attach a minimized testcase or provide a test URL?

Comment 2

[Ian O'Shaughnessy]

http://www.rave.ca/dev/bug/test.html

Comment 3

[Steve England [:stevee]]

Attachment: testcase from comment 2

Comment 4

[Adam Guthrie]

See bug 168232 comment 1.

*** This bug has been marked as a duplicate of 168232 ***

Comment 5

[Ian O'Shaughnessy]

So if this isn't a bug then what is the work around to get a block element to get displayed inline? "inline-block" doesn't work..