CSS issue With <ul> tag in Firefox

Question

The following layout renders properly in Chrome, Safari, IE & Opera. In Firefox, the breaks are ignored.

This is the expected result:

Expected Result

My preference is a CSS tweak that will get it working in FF (and keep it working in the others), but I'll take another approach to achieve the same results, if necessary.

JSFiddle

<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0 } ul li { clear: both; } ul li * { float: left; } ul li div:first-child { width: 100px; } </style> </head> <body> <ul> <li><div>One</div><div>A</div></li> <li><div>Two</div><div>B</div></li> <li><div>Three</div><div>C</div></li> <li><div>Four</div><div>D - 1<br>D - 2<br>D - 3<br>D - 4</div></li> </ul> </body> </html>

Fabrício Matté · Accepted Answer · 2013-01-10 21:31:36Z

3

br { float:none !important; }

Fiddle

Or use a more specific rule instead of ul li * to not apply float to the brs.

Tested on Nightly 21 and Canary 26. float seems to affect br elements only in Firefox nevertheless.

answered Jan 10, 2013 at 21:31

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabrício Matté Over a year ago

No problem. =] Normally, a person would expect <br> to insert a line break nevertheless of CSS styling.

Collectives™ on Stack Overflow

CSS issue With <ul> tag in Firefox

JSFiddle

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related