CSS columns not displaying as expected in Opera (look okay in Firefox) - html

I'm trying to create a layout with automatic CSS columns. They look fine in Firefox but behave very strangely in Opera (both latest versions, Mac).
In Opera when there is sufficient content, the text all appears vertically centred in the columns, whereas I want it to be top-aligned (and would expect it to be by default).
Also if there is a lot of content without a break, it reverts to a single column and seems to 'break out' of the flow.
I have tried vertical-align and I have been fiddling about with flex – but this seems to break the columns completely.
.two-col .textwidget {
-webkit-column-gap: 50px; /* Chrome, Safari, Opera */
-moz-column-gap: 50px; /* Firefox */
column-gap: 50px;
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
}
As I said in Firefox it appears how I would expect and how I would like. In Opera – no.

Related

Font family top and bottom Padding different in chrome and firefox

I am using 'Shruti' web fonts and they rendered differently in chrome and Firefox.
Added images are for textboxes and same things goes for other elements as well.I have already tried using padding in pixel/em but same thing again.
How to fix (vertical) font spacing problem in all browsers for consistency?
:-moz-placeholder { /* Firefox 18- */
line-height:10px;
}
::-moz-placeholder { /* Firefox 19+ */
line-height:10px;
}
:-ms-input-placeholder {
line-height:10px;
}
Try adding this to your css code, it will let you adjust the line height of the placeholder only for firefox to make it look like in chrome.
Change 10px for whatever you need.
About the other elements you should post an example with your code

Text leaves input box when in columns

I am having a problem where when I fill a html input box like:
If I add one character more it will fall out like:
This is the css:
form {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Here is a fiddle
I have tested this with chrome only.
Update
This does not happen in safari
Update 2
This does not happen in firefox
Here is the bug report

Setting opacity of an element breaks scrolling of parent in Chrome

I am having a bug I don't understand at all and that I can't find an solution for on the web.
My setup is pretty simple: I'm having a container with various children. The container (marked red in the screenshot) has a fixed height and overflow-y auto. Scrolling works just as expected.
.card-details-container {
height: 500px;
overflow-y: auto;
}
But when I change the opacity of one of the contained children, it is suddenly broken:
.barchart .barchart-bars div {
opacity: .5;
}
I am only experiencing this bug in Chrome (41.0.2272.118). I have no idea why this would be happening. Any help is appreciated!
Try:
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
Also, check the borders.

CSS3 columns: a better way to add column break

There is a content that is spread across several columns using CSS3 columns that work quite well in Firefox and Webkit, Opeara.
The problem is that column breaks with css are implemented only in webkit (webkit-column-break-before) and not in other browsers.
What would be the better way to implement the breaks.
The height of the column is fixed.
I can think of adding block element with height equal height of the column.
Would be grateful for ideas.
Thanks.
Without seeing any code or what you are working on, perhaps the column-count, column-gap and the column-rule properties might work.
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
If this is related specifically to the breaks and not the columns, have a look at using
break-inside: avoid-column; and -webkit-column-break-inside: avoid; or use display: inline-block; on child elements, preventing them being split between columns.

How to create background css div/rounded corners?

How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:
Use the border-radius CSS property to create rounded borders:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.
Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc, I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.
See also: MDN: border-radius.