Closed Bug 947407 Opened 11 years ago Closed 4 years ago

3-column list renders all text in 2 columns with empty third column

Categories

(Core :: Layout, defect, P4)

25 Branch
x86
All
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: nathan, Unassigned)

References

()

Details

(Keywords: testcase)

Attachments

(3 files)

Attached image actual result.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131112160018

Steps to reproduce:

I put a lot of effort into narrowing down the issue, you can see my work so far at http://jsbin.com/azOyIHEG/20/edit

Basically there is a 2-column section on the page and then a 3-column section after that. The 3-column section has a media query that changes it to two columns on smaller screens. 

Both contain lists and the 3-column section has it's list-style-type set to none and a column gap measured in a different unit then the two-column section.

It also seems to be at least somewhat dependent on the exact size of the content. I currently have bootstrap 3 on my test page - I'm trying to reproduce the bug without it.

Demo at http://jsbin.com/azOyIHEG/20/edit (Note: your screen must be at least 1200px wide. I think that requirement will go away if I can reproduce the issue without Bootstrap.)


Actual results:

The content from the first and second columns both appear in the first column. The content from the third column appears where the second column should be. The third column is empty.


Expected results:

Three columns with roughly equal amounts of text.
Attached image expected result.png
Summary: 3-column layout can renders all text in 2 columns with empty third column → 3-column list renders all text in 2 columns with empty third column
Here's an example that reproduces the bug without Bootstrap: http://jsbin.com/azOyIHEG/29/edit
I think the bug is in the following css. (I do not understand the reason why you need this)

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
I actually just managed to reproduce the issue without the 2-column list, so apparently it's not related, or at least not required to produce the bug: http://jsbin.com/azOyIHEG/33/edit
(In reply to Alice0775 White from comment #3)
> I think the bug is in the following css. (I do not understand the reason why
> you need this)
> 
> <link
> href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.
> css" rel="stylesheet">

You probably hadn't seen my update yet, I now have a test case that reproduces the bug without that CSS: http://jsbin.com/azOyIHEG/33/edit
Sorry to keep blasting this, but here is an even further simplified test case: http://jsbin.com/azOyIHEG/42/edit
I think jsbin.com is buggy.
STR
0. Make browser width > 1200px
1. Clear cache if necessary
2. Open attachment 8343993 [details]
    --- observe number of columns
2. Reload
   --- observe number of columns

Actual Results
  After reload, 3 colmuns

Expected Results:
  Number of columns should be same as before
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
OS: Mac OS X → All
Product: Firefox → Core
I played around with the CSS and Firefox shows the correct result if I remove…

p {
    margin: 0 0 10px;
}

…or if I remove…

a { padding:3px 1px 0 1px; }

…or set the 3px to 0.
It seems that the problem has to do with margin or padding – top and bottom.
Keywords: testcase
Priority: -- → P4

After 6 years, the -moz- prefixed column properties are gone. If I change everything to the unprefixed properties, I cannot reproduce this issue anymore in Nightly 75. Should this be closed?

Yes, I think this should be closed.

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: