876471 - Layout: CSS -moz-column-* : leftmost column does not start at line 1

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[support]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130511120803

Steps to reproduce:

Bug in der Renderengine with CSS feature: -moz-column-*

Example:

.textspalten {
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  -moz-column-rule: 1px solid #AAAAAA;
  margin-top: 10px;
  text-align: justify;
}

Note: The margin-top does not affect the layout problem, it's correctly assigned to the entire element. 

Examplepage: 

http://cloud-foo.de/SSL-Zertfikate

PS: i don't know who long the page will be in this state, don't wait too long to take a look ;)



Actual results:

The rendered text in the leftmost column does not always start in line 1 . Experiments with firebug revealed, that a padding on the left side, can force it to be correct. This workaround is not always working. 


Expected results:

All columns should vertical aligned to the top. 

It would be nice to have a new CSS option like:

-moz-column-vertical-align: {top|middle|bottom|auto}

Comment 1

[Alice0775 White]

Rendering looks same in all browser( ComodoDragon26.22.0, Opera12.15, Fireofx21.0 )

Comment 2

[support]

Attachment: screenshot of the layout problem

Comment 3

[philippe (part-time)]

I'm fairly sure this is invalid.

As noted all browsers have the same rendering. And it is the expected behaviour. The first child of the multi-col block is a <p>, the 'gap' or 'misalignment' is caused by the (default) margin-top for the p element.

p { margin-top: 0 } would remove that 'gap'.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Yep.