Browser issue User Banner Styling bug

Claudio

Well-known member
There's a display bug on the user banner styling option. You'll see that below the blue bar there's a blue line which belows to RoyalBlue banner:
upload_2013-8-1_9-9-50.webp

If I uncheck the -webkit-column-break-inside: avoid; property, the blue line dissapear and goes to the top of RoyalBlue banner where it should be
 
I should note that thread prefixes have had this since 1.1 as well.

Removing that line causes other issues. I don't actually understand why the CSS causes this - it seems like a browser bug. It's very minor though.
 
I should note that thread prefixes have had this since 1.1 as well.

Removing that line causes other issues. I don't actually understand why the CSS causes this - it seems like a browser bug. It's very minor though.
It's because of the margins. They are now handled differently in columns and all margin-top's and margin-bottom's spread to next column instead of collapsing at the bottom or the top of the column. Which is a really weird decision in my opinion.
 
It's because of the margins. They are now handled differently in columns and all margin-top's and margin-bottom's spread to next column instead of collapsing at the bottom or the top of the column. Which is a really weird decision in my opinion.

So then what's the solution across all browsers?
 
Top Bottom