Layou difference between FF and IE and Chrome

HTML & CSS
1

Hi all. I am working on this website. I am using the display: table, table-row and table-cell properties to center the main content (right) vertically. In FF and IE it is acting as it suppose too but in Chrome the main content is way off to the bottom. I have been looking if i could find something about a bug in Chrome when it comes to the above display properties, but couldn’t find anything. Can someone please tell me what I need to adjust in the CSS to make this work in Chrome as well. Thank you

2

Hi,

Move the logo and facebook divs out of the table structure because they will be interpreted as table-rows and cells and break the structure. The browser will construct anonymous elements to make the structure complete. Both those elements are absolutely positioned so there is no need for them to be inside a table structure anyway as you can’t really have a table element as a stacking context for absolutely positioned children.

I haven’t tested the above but the developer tools show the first real table-row some way down the page in chrome whereas in Firefox the first row is at the top. The position of absolute elements within tables is undefined in the specs so you should always ensure the table structure is correct fits and then either nest a position:relative div inside the table in order to place the absolute element. However that is also not possible in relation to the cell dimensions but only the position:relative div.

When you use a display:table structure the html needs to make sense.


<div style="display:table">
		<div style="display:table-row">
				<div style="display:table-cell"> Cell content</div>
		</div>
</div>

However in simple cases you can omit the inner elements as the browser will construct the anonymous table-row and table cell (or indeed vice versa).


<div style="display:table">

 Cell content

</div>

However once you define one element as a row then your structure must make sense. In your example you have a display: table wrapper and then two divs which you have absolutely positioned. The browsers will treat these 2 div elements as being inside cells. When you then create another div that is table-row the browser will decide that it is now a new row and the above two elements will be closed off in their own table row so you now have two table rows.

Treat css tables with the same respect you would a normal table and you won’t go far wrong :slight_smile:

3

Hi Paul thank you for the response. Those two elements were indeed causing this problem, so I indeed moved them out of the way. Thank you for the help :tup: I have one question though. Why are FF and IE dealing with this as I would have expected and Chrome isn’t. Does this mean that actually Chrome Interprets this the way it should be?

4

It’s because the behaviour of absolute elements within table-cells is not clearly defined in the specs and is therefore down to interpretation via the user agent. It looks like Chrome accepts that there is something there while Firefox collapses the space. Both are right because the exact behaviour is undefined in the specs. There are a number of ‘edge cases’ where the specs have not defined a specific behaviour because possibly the result is too difficult to compute exactly (or the spec has not been defined for those extremes).

5

Thanks for the explanation. I find this realy interresting