so I though about using svg files for icons.
for e.g. like this
.icon-page{
background-image: url("../../layout/icons.svg");
background-size: 2em 2em;
}
I would like it to scale with the font-size of the user, which is why I figured I use em.
But if the users default font-size is something like 23px or so, the svg is all blurry because the icons can not fit perfectly into the pixels. Is there a way to get around that? Can I detect the users font-size with a mediaquery and set the icon font-size to a certain value to make sure the icons look okay?
Comparison 22px (bad/blurry) to 24px (correct)
Demo: http://jsfiddle.net/TgHLf/17/
Related
I'm using a template from semantic-ui. This one: https://semantic-ui.com/examples/homepage.html. Essentially i'm trying to change the height of the background to match the height of my image. Right now my image (the one in background-image) shows up but the background (which I turned red simply to see it better) is larger then it so I have this dead space between my background-image and the beginning of the content.
The only way I seem to be able to manipulate the background is the color. Any other time i'm changing it's size (which i've experimented with quite a bit) it only seems to change the size of the image. Not the red background.
Perhaps i'm not understanding the relationship between the two? Any tips on how to change the background's height to match the background-image?
Any help is appreciated.
CSS below:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}
I found it. There was a native min-height: property that was over riding my attempts to change. Simply put in
min-height: 500px !important;
and it worked.
working on a class project, and something has our whole class, including our teacher, stumped. We're making a calculator out of html, css and javascript. The problem involves CSS. We have set the calculator to height: 50vmin and width: 50vmin.
We then set font-size to 5vmin, expecting it to be 10% of the container height. Instead, the font size is coming out to be around 11-12% or more of the height. For example, on my screen, the container is 323.5 px and the font-size is 37.981px. This does not include the padding or margin: it is the font-size itself. Does anyone know why the font is not coming out 10%? With 5 rows of buttons, plus margins and padding, it makes quite a difference.
Thanks!
font-size: 10vh;
1vh = 1% of viewport height
Based on my understanding of line-height and box model calculations, I believe that the height of an element, margins and all, is the sum of the following:
margin-top
border-top
padding-top
line-height = font-size * numeric line-height multiplier
padding-bottom
border-bottom
margin-bottom
However, when I implement this myself, as shown in this fiddle, everything looks good in Firefox and in Chrome except for the line-height.
.btn {
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid darkred;
padding: 6px 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
}
Mathematically, my font-size (14px) multiplied by the line-height (1.42857) should yield 19.99998px, which effectively rounds to 20px. However, in Firefox the resulting line height is 22px, and in Chrome the resulting line height is 19px. What is accounting for this discrepancy? Why am I not getting the expected 20px line height?
Inexplicably, Bootstrap buttons appear to correctly yield 20px for the same concept in Firefox and in Chrome. I hope someone can help me understand why and how Bootstrap accomplishes this feat.
The line-height is not multiplied with the font size setting, it's multiplied with the actual size of the font as rendered.
The actual size of the font is based on the font size setting, but it differs a bit depending on the font used, the font implementation, the operating system, font rendering settings, et.c.
Setting a font size like 14px doesn't mean that the text ends up exactly 14 pixels high, rather something that is supposed to look like 14 pixels high, depending on the settings in the font. Some fonts may for example be more narrow and thin, so it would need to be rendered slightly larger than other fonts to seem like the same size. This is up to the discretion of the font designer, so it may differ somewhat from what you feel would be correct.
Also, font sizes for the graphics software are measured in points, not pixels. When you specify a size in pixels, that is translated to a point size that would give approximately that size in pixels. There is some rounding going on there, and the exact algorithm differs between browsers, so that gives a little variation.
I am using one picture as my background of header of my blog.
CSS i have used is
#header-wrapper {
height:125px;
padding: 0px;
margin: 0;
background: url("http://3.bp.blogspot.com/_lxBSX0YJV58/TOspWPI1r-I/AAAAAAAAA34/uw872WFS3ME/s1600/headerbg.jpg") top center no-repeat;
background-size: 1120px 124px;
}
original width of an image is 990 px and i made it 1120px using property
background-size: 1120px 124px;
It looks okay in firefox 4 and Opera 11 but doesn't work in IE 7, Palemoon etc. image size does not increases and remains 990 px.
You can check my blog HERE
Any help...how can i make it compatible with all browsers ?
Do i need to use another property ?
background-size is a CSS3 property, and as such, it is not understood by ancient browsers. You might like this post, explaining various approaches to scaling background images.
I would suggest making the original image the size you want. Even if all browsers supported this CCS3 feature there is no telling what way they are going to implement it which may leave you with a distorted looking image.
Im using Lucida Grande font for my site and when I put the font-size large, say 30px, the fonts in the two adjacent lines overlap upto some extent. How can I put a gap between the two lines using CSS?
Use the line-height property. Something like
p {
line-height: 1.3em;
}
Should do. This will give you line height 1.3 times the font-size you set. You probably have this set to a fixed number, like 25px in another ruleset or stylesheet, thus when you increase the font-size the line height does not increase with it.
You probably have a fixed line-height set. Change it to be either relative (e.g., line-height: 1.3em;) or fixed, but larger (30px).
/*
user same line-height as as font-size;
*/
.product{
font-size:30px;
line-height:30px;
}
/*
its always a better practice to define line-height in body if you are going to use same font size across or as standard
*/