MozillaZine

Nested CSS table affects outer CSS table

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
BenoitRen

User avatar
 
Posts: 5926
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Post Posted October 28th, 2014, 7:24 am

Testcase. Press the button to toggle the issue.

I have a CSS table with three cells. The second cell has a CSS table of its to line up some thumbnail images next to descriptions. However, the image contained in the header pushes down the first and third cells of the outer CSS table when present. I do not understand why this is happening.

Dom1953
 
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Post Posted October 28th, 2014, 3:25 pm

CSS 2 uses the baseline of the first inflow line (or table row) box within a cell for alignment purposes ((ref). So by default the first line of the brand list, header text "Titel" and first line of the partner list are being aligned. Because the "Mickey" img element has block display its presence does not change this vertical alignment by baseline.

Code: Select all
.brands, .content, .partners {
  display: table-cell;
  vertical-align: top;
  padding-top: 0.5em;
}

For example adding vertical-align: top and equal padding can vertically align the cells in question and stop the outer cells being "pushed down" when the image is displayed.

BenoitRen

User avatar
 
Posts: 5926
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Post Posted October 28th, 2014, 4:23 pm

So, if I understand you correctly, vertical-align:top bypasses the usage of the baseline?

Thanks! I think I get it.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 3 guests