http://jsfiddle.net/mJxn4/
This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.
The CSS in question is:
#others .item em {
font-size: 13px;
line-height: 17px;
}
Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.
Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.
Because the em tag is inline and its line-height cannot be lower than its parent div.
For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.
In order for line-height property to work, div should has display property equal to block
.app-button-label{
line-height: 20px;
display: block;
}
I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?
Hope this helps anyone else facing the same problem in future
You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/
You can either reset the reset, or use a different reset if you really need it.
See here for more details:
http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
The best way to do it is using css reset.
Write your own or use popular one like
http://meyerweb.com/eric/tools/css/reset/
Yes, the block level elements(h1, h2, h3...h6,div) sets the minimum line-height for its inline children elements(span, em etc.). Which means if there is a element inside (with line-height 1.5), then the can set minimum line-height of 1.5 and no less than it.
The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;
If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.
Hope this helps
Ahmed
Related
I have a span text that should change to:
font-size: 13px;
line-height: 1.38;
Using Bootstrap I noted that the line-height doesn't have any effect. I can see changes only when I set the value more than 1.6 onwards...
I added !important, but this is not changing the big space I have between lines, which should be less as showed in the designer prototype.
Do you have any idea why this is happening?
That is because the span element is an inline element that provides no changes when line height is applied on it.
You should rather wrap up the text in p or paragraph tag to make the line height work effectively.
Is it possible to reduce the size of all element of DOM by a specific value?
I am using bootstrap style now.
Like for h5 it is 14px and I need 12px, for h1 it is 36px and I need 34px so on.
I have 2 options to do it
To rewrite a custom css for all element. It needs a huge change.
Using jQuery. I need to traverse all element of DOM. Find out there
font-size and reduce it by 2px. It will slow down page load time.
Is there any better way to do it?
What you can do is, you can set a base font-size for your body in rems.
Meaning, you have to set a font-size property for your body like so:
body {
font-size: 10px;
}
After this, a rem unit becomes equal to your base font-size:
1rem = 10px
Therefore, you need to set the font-size of all your elements to rem's.
When you want to scale everything down or up, simply change the body font-size property and it will scale everyting else accordingly.
Thus, the units become relative.*
If you want to go down the JS ways, you can use a plugin like FitText or some other alternative.
I want to set my font-size to 100% (that is, 16px as default in my browser). Having embedded Bootstrap and its' Normalize.css, when I set font-size to 100% or 1em my text gets even smaller than 16px!
PS. Once I explicitly set font-size to 16px it does work, though it is not what I'm looking for.
I came across this question while dealing with exactly the same issue today. Here's what happens:
bootstrap.css sets html {font-size: 62.5%;} - this is 62.5% of whatever the browser's default font size is - probably 16px., i.e. you end up with a starting font-size of 10px in your <html> element.
Then bootstrap.css sets an explicit body {font-size: 14px;} which overrides the 62.5%/10px font set on <html>.
Now your css comes along and sets a body {font-size:100%} and since the 100% refers to the parent element's font-size, i.e. the <html> element, you get 100% of 62/.5% and presto - tiny font.
I guess the main thing here is that font-size:<percentage value> is relative to the parent element's font-size, not the current font-size. The above holds for em units too, since they also uses the parent's font-size.
To get around it, either set html{font-size:100%} in your css (not sure how bootstrap gets affected by that though), or set an explicit pixel font-size in your css for the body, or inherit whatever bootstrap sets up.
Malte
did you edit this in the bootstrap CSS itself? so yes, make note of changes, and add a 2nd CSS line in your webpage UNDER the CSS of bootstrap, in the new CSS< you only make new rules of changes, those wil " overwrite" the bootstrap CSS when the browser reads them
Try loading your css file after the bootstrap css file.This way you can overwrite almost any property specifed by the bootstrap.Your css will take precedence of the bootstrap file.You can also set !imporatant to properties that you specifically want to overwrite although loading your css after bootstrap will do the trick
I am building a responsive page layout and it works great so far, but I have a question:
Should I be using em, px or %?
For example, I want to have border radius applied to an element. Should I use this code:
border-radius: 1.563em;
Or this:
border-radius: 25px;
Should I be using ems for similar properties or should I stick with px?
Generally, don't use px for responsive layouts.
If you use a px-based media query, then your layout may end up looking like crap when the user zooms. And unfortunately, that I know all to well because I made that mistake too.
Regarding your example with border-radius, you may discover the two look really different when the font-size is increased - demo. The first and the third use px for border-radius, while the second and the fourth use em.
But there will be exceptions and if something doesn't feel right on zoom (for example, a box-shadow that looks exaggerated), try it with px as well.
Also check this article.
Just for info, if it helps, it's possible to use rem . It solves the problem of "cascading size" with em. If you set
body { font-size :62.5 %; } /* Trick to have 1em =10px */
li {font-size:1.4em; }
your <li> will be 14px, but if you have a list in a list, the second level <li> will be at 20px, and at third level will be 27px, etc..
With rem ( means "root em" ), all <li> are at the size you define.
More info : http://snook.ca/archives/html_and_css/font-size-with-rem
and http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem ( in french )
Why margin:2.5px does not work? at one situation in my code i want to give margin:2.5px in IE6 conditional CSS to solve IE double margin and my default css has margin:5px but in IE6 css margin:2.5px and margin:2px creating same margin. then how to get same margin on both browser?
This is code of default screen CSS
#newsHeadline LI
{font-weight: bold;
list-style-position: inside;
font-size: 13px;
margin: 5px 0px;
width: 320px;
line-height:
normal; list-style-type: disc;
position: relative}
this is css code in conditional i'm writing #newsHeadline LI {margin: 2.5px 0px}
Edit: 15 feb
if margin:2.5px does not work then how to get same margin in both browser IE and FF? Is there any other way?
While plenty of people have suggested that the pixel is indivisible, and therefore a fractional pixel value makes no sense, the CSS standard does not actually rule out fractional values. Indeed, it suggests that when a high-resolution device is used, a CSS pixel unit should be mapped to a larger number of device-specific elements. My reading is therefore that 2.5px should not be explicitly wrong, just that you might not be able to rely on it to do something useful, especially, I might say, in Internet Explorer.
Because px is the smallest unit possible. U really can't divide one display point, can you?
Edit: AS for your problem, if there is no interference with background (i.e. different color), you can try setting padding instead of margin for IE6.
On the indivisibility of pixel: with the Zoom feature in modern browsers comes the notion of a "logical pixel". A smart enough implementation of zooming could and should use the fractional pixels...
You can always set the box to display: inline, but that is not always what you want. Double margin affects block level elements.
As #Andrew Moore points out if you use this in your main stylesheet it will not be future proof and should be included in the IE6 stylesheet. Thanks.
Also, in some cases, you can use padding instead of margin since padding doesn't double. However, padding effects different properties of your layout and box model.
you probably just need the fish fix
<ul
><li>content 1</li
><li>content 2</li
></ul>
remember no space between each ul/ol or li
A pixel is the smallest unit of display on your screen. Since nothing smaller can be displayed, so there is no way to place an item on the screen at a fractional pixel position.
Why margin:2.5px does not work?
As others have pointed out already, a pixel is, by definition, the smallest unit, and thus can't be divided any further, by definition.
Then how to get same margin on both browser?
The usual fix is to set display: inline; on the element in question. In fact, some suggest to just apply the inline fix to all floats if you like, making sure that the fix only applies to IE5 and IE6 (e.g. by using conditional comments), since there are no known side effects in these browsers.