553329 - Div container, "position: absolute;" does not render with correct behavior compared with FireFox >3.6, Chrome, IE7/8.

Status: RESOLVED DUPLICATE of bug 551699

(Core :: Layout, defect)

Description

[Adam]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/532.9 (KHTML, like Gecko) Chrome/5.0.307.11 Safari/532.9
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

.img-thumb cite {
	background: #111;
	filter:alpha(opacity=55);
	font-size: 10px;
	font-weight: bold;
	opacity:.55;
	color: #fff;
	position: absolute;
	text-align: center;
	bottom: 0;
	border-top: 1px solid #fff;
}

This renders an image caption over the top of an 'img container div', on IE7/8, Chrome and previous versions of FireFox without trouble, on 3.6 it renders the caption at the bottom of the page, not the parent div.

Reproducible: Always

Steps to Reproduce:
1. Go to http://www.thorneymotorsport.co.uk/tuning/ford/focus-rs in 3.6
2. Go to http://www.thorneymotorsport.co.uk/tuning/ford/focus-rs in Chrome
3. Compare the CSS rendering
Actual Results:  
I see a problem.

Expected Results:  
Rendered it as previous versions have.

Comment 1

[Ria Klaassen (not reading all bugmail)]

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a4pre) Gecko/20100318 Minefield/3.7a4pre

Confirmed for Firefox 3.0, 3.5, 3.6 and latest trunk. It worked fine with Firefox 2.0.

Comment 2

[philippe (part-time)]

.img-thumb {
border:medium none;
display:inline-table; /* <-----------------*/
float:left;
margin-left:4px;
margin-right:10px;
margin-top:5px;
position:relative;
z-index:2;
}

div class="img-thumb" is the parent element for the problem element.

Firefox 2.0 didn't support that display type. Support was implemented in Gecko 1.9.0/Firefox 3.0.

But Gecko doesn't support tables being containing blocks for elements with display:table-* (bug 63895).

Comment 3

[Adam]

Changing the parent div parameter to:

.img-thumb {
display: inline-block;
}

This aligns images for me the way I require, with the divs aligned ok. This is a workaround only, the bug itself is not fixed when a div is placed inside a tabled div.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Actually, this is a real bug, not worksforme or a duplicate of bug 63895.  Luckily, it should be fixed in 3.6.3.