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.
Related
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.
Browsers have added additional functionality/styling to input[type=number] in the form of up and down buttons.
I was able to remove this styling in Chrome since we're able to view the shadow DOM and figure out an element's corresponding identity.
However, Firefox is another story. Is anybody aware of any way to remove the up and down buttons on input[type=number] in Firefox?
I came across this post, but the extension wasn't sufficient.
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
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
I have text with font-size 18 and it is displayed in a block style. I would like to increase the text's "height," in other words, increase how much vertical space the text takes up alone. I don't want to increase the font size in order to do this. Any suggestions?
What about line-height Property ?
p.small {line-height:90%}
p.big {line-height:200%}
Source: http://www.w3schools.com/cssref/pr_dim_line-height.asp
Hope this helps.
You could use the transform property and scale the height vertically:
CSS
.stretch {
transform : scale(1,5);
-webkit-transform:scale(1,5); /* Safari and Chrome */
-moz-transform:scale(1,5); /* Firefox */
-ms-transform:scale(1,5); /* IE 9+ */
-o-transform:scale(1,5); /* Opera */
}
Check out this Fiddle.
Have you tried transform? In particular for your case:
-webkit-transform:scale(1,5); /* webkit */
-moz-transform:scale(1,5); /* gecko */
-o-transform:scale(1,5); /* opera */
transform:scale(1,5);
As explained here:
http://www.css3files.com/transform/#scale
I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth