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
Related
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 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.
Using the css attribute transform: rotate(); works fine but when using it under horizontally oriented text it displayed outside of the div but I want it to display it within. I tried a lot with the display, position, left, top, float etc. attribute but nothing worked. Any ideas?
Here is the css-code for the vertical text:
width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
Here is the example to try:
http://jsfiddle.net/ty6Zj/
You should use transform-origin property for that
transform-origin: 40px 20px;
Demo
Note: You've used all proprietary declarations for transform, should use a standard one as well..
transform:rotate(270deg);
Also, make sure you have this at the end of the proprietary properties...
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
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.