I font weird behavior if I added font-size to html
html {
font-size: 10px;
}
it will override all font-sizes I have on all html tags and it will make them smaller
I want to keep the font-size on html but I have one div that I won't it to be effected by html font size
Here an example
https://jsfiddle.net/Ldgworje/1/
try to remove the html from CSS and try
I want to keep the font-size for html but I have one div that I don't want it to be effected by html font size
as you see in the example
I hope you can help
This is happening because you are using rem for the font size. rem and em are supposed to work that way. Check https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
If you do not want rating to be affected use px instead.
What you do is you add a rule after that html font rule, and you create an ID for that div and you set font size to whatever:
html {
font-size: 10px;
}
div#fontSize {
font-size: 14px; /*Or whatever size you want*/
}
If you want to leave the font size the same as the default for the div element, then just set it to 1em, as below:
div#fontSize {
font-size: 1em; /*Sets this size to 16px, which is default*/
}
Simple! Just ask if you need any help/explanations/fiddles.
Related
I am working on an E-commerce design where I was using following css class to display Rs. currency before product price.
.rupes:before {
content: 'Rs.';
}
Now my requirement changed and I have to replace Rs. with Rs symbol so I used the following css:
.rupes:before {
content: url(img/rupeess.png);
}
Now my question is, I have to change the size of Rs symbol , as the width of price.
Since class rupes is used on overall website
on some page the Rs symbol is very small and on some page its very large.
So, is there any way to use same class, but inherit the size i.e, width of price for Rs Symbol.
Thanks in advance
The other option is instead of an image you can use the Rupee character that should be in most default fonts since Windows XP. This will lower the resources for your site, and will always scale nicely...
.rupes::before{
font-family: Arial;
content:"\20b9";
}
http://jsfiddle.net/nqadgqgy/1
Yes, you can set the width or height in em to be relative to the font-size of the displayed price.
.rupes {
content: '';
background: url(img/rupeess.png) no-repeat center;
display: inline-block;
width: 1em;
height: 1em;
}
Setting the width and height to the same value assumes a square icon. You may also use other icon ratios, e.g 4:3 (width: 1.25em; height: 1em;).
Usage example:
.price {
font-size: 16px;
}
.big-price {
font-size: 24px;
}
Display the pseudo element with a size of 16×16 pixel:
<p class="rupes price">123</p>
Display the pseudo element with a size of 24×24 pixel:
<p class="rupes big-price">456</p>
That way, the image is always as big or small as the font-size is.
you can use position:absolute on .rupes:before and position:relative on .rupes and then you can set the height and width of absolute div in percent..
I wanted to know If I can use both px and em in the same CSS file (for same tags/class). What I mean by this is that, can I have something like this : -
body{
font-size: 10px;
font-size: 0.625em;
font-weight: normal;
font-family: arial;
margin: 0px auto;
color: #333333;
background: #E0E0E0;
}
My objective is to convert a very big CSS file that supports 'em' so that the user can decide the font size they would like to use. But my problem is the well documented issue with 'em' - the nested tags get affected.
I sought for help by using 'rem' in certain places instead of 'em'. Though it helped a bit, I lost the entire structure of the webpage.
I would like to keep the exact same font size in my webpage and still support the user wanting to change font size.
I am using jQuery to add a class to the body tag that would contain a specified font size and everything else should be scalable.
To address your sample css...
You can mix px and em (and percentage) to your heart's content. This is fine:
body{
font-size: 10px;
margin: 0px auto;
}
You cannot define the same css property twice. Well, technically you can, but only one of them will be applied. So this is broken:
body{
font-size: 10px;
font-size: 0.625em;
}
But it has nothing to do with mixing px and em. This is also broken:
body{
font-size: 10px;
font-size: 20px;
}
The good news is you're on the right track...
Define some top level container, or the body, with font-size in pixels.
Define every sub node with font-size in em.
Use javascript to change the top level container's font-size.
Here's an example fiddle: http://jsfiddle.net/pabo/pn1tyaxb/
Notice that the buttons, and indeed anything outside of the top level container you've chosen, will not be affected by rescaling.
I know this is not really the question, but I came here looking for another answer, so I will post it anyway. (About your question, obviously it makes no sense to define the same property twice with different units, but check the other answers for that.)
But yes you can use em and px in the same style sheet, and you can use em and px even in the same property!
body {
font-size: 12px;
}
.footnote {
font-size: 0.7em;
}
input {
padding: 0.5em;
border: 1px solid #666;
}
.input-replace {
padding: calc(0.5em - 3px);
border: 4px solid #eee;
}
When you use calc() you can make sure the size of the two elements is always exactly the same.
Use em units for any text (or other elements) that you want to scale based off the user's selection. And use rem units for things you want to stay the same size.
DEMO EXAMPLE
CSS: The REM units will be based off this value (base 10 for easy calc)
html { font-size:10px; }
HTML: User can select what size they want the page font to be
<select id="sizeSelector">
<option value="10px">Extra Small</option>
<option value="12px">Small</option>
<option value="14px">Normal</option>
<option value="16px">Large</option>
<option value="18px">Extra Large</option>
</select>
JS: Create a jQuery function bound to the select box that modifies the <body>font-size, thus changing your em based declarations:
$(document).ready(function() {
$("#sizeSelector").change(function(e) {
$("body").css('fontSize', e.target.value);
});
// initialize font size for first page load
$("#sizeSelector").prop("selectedIndex", 2).trigger('change');
});
Updated: Code is no longer dependent on classes
You cant define in the same css.But you can define like this.
.input {
width:100px;
}
<input width:0.1em;>
First time I've ever noticed this but is probably an easy one. How come IE and chrome give different heights to fonts? What are the best practices to combat this? This is messing up my header layout, I'm trying to get it to look the same on all browsers.
The code to produce Img:
<html>
<head>
<style>
body{margin:0;}
div {
margin-top: 5px;
font-size:16px;
}
.c1 {
font-family: Arial;
background: blue;
}
.c2 {
font-family: Lucida Sans Unicode;
background: red;
}
</style>
</head>
<body>
<div class="c1"> My Text 1 </div>
<div class="c2"> My Text 2 </div>
</body>
</html>
Edit: - Additionally
Here is an image of the text laid over one another. The text height in pixels is the same in each but the problem seems to be that they don't both use the same margin/padding(whatever it is) at the top and bottom of the text.
Have you tried setting defaults for the webpage?
This problem actually looks like it is line-height.
Browsers tend to render things differently from one browser to the next. Try setting defaults.
Line-height actually changes the size of the line the text sits on. Might be padding in this case...
line-height
margin
padding
font-size
Theres a lot of defaults you should/could set. This does not ensure the same look from one browser to the next. It does help alot though.
Good luck!.
It's only because you haven't set a font-size, so it uses the default size of that browser. I tried the code and had the same thing, but after setting a size it didn't show up anymore.
div {
margin-top: 5px;
font-size: 30px;
}
And just for your knowledge, you can use rem to set size by default browser size, like this:
div {
margin-top: 5px;
font-size: 1.5 rem;
}
And that gives you 1.5x the default size of the browser.
Update
Problem seems to be in line-height, which you should set for the divs. It could also be the padding of the divs. Try setting those and I hope it helped. If not then try setting div display: block.
I have a structure like follows
<div class="panel">
<div class="product">
<div class="title">My little pony</div>
</div>
</div>
and the title div has its font-size set, but so does the panel div.
.panel {
font-size: 0.89em;
}
.product .title {
font-size: 1em;
font-weight: bold;
height: 3.8em;
line-height: 1.2em;
}
When I look at this in the browser it appears that the font-size for the panel class is applying to the title div, firebug does show the panel style as being crossed out but when toggling the font-size on the title div it makes no difference to the size.
If I toggle the panel class font-size then I can see that change that I am expecting.
What is going on here am I missing something obvious?
Note: css has been simplified
Fiddle
The font-size is being overridden (that's why you see it crossed out in Firebug), but it doesn't actually do anything because of the relativity of ems.
1em = the font size of the parent element. In your case, this is .panel with font-size: 0.89em. So setting .product .title's font-size to 1em doesn't affect the outcome.
Formula to calculate em equivalent for any pixel value required
1 ÷ parent font size (px) × required pixels = em equivalent
(Credit: http://v1.jontangerine.com/silo/css/pixels-to-ems/)
Per this formula, to get the desired font size you need to set it to:
1.1235955056179775280898876404494
Note: the browser can't render an umteenzillionth of a pixel so only a few decimal places are actually needed.
I am currently designing a web page with em units. I guess I don't understand it as well as I thought I did because a problem has occurred while I tried to align two separate span tags with margin-left. They were placed in the upper-left corner of my header. They were positioned on top of one another using display:block. When I used margin-right to align both the span tags, the larger span and the smaller tag didn't align correctly. I used the same number for margin-right, but they were still messed up.
Is this because I'm using em's?
How can I fix this?
I will paste the code I'm using below so you'll get a sense of what I'm working with. Hopefully I've explained this well enough.
HTML
<div class="header1">
<span class="title">Title goes here</span>
<span class="subtitle">This is the subtitle</span>
</div>
CSS
body {
color: #333;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 62.5%; /* 10px */
line-height: 1.28;
}
.main1 {
width: 96em;
/* horizontally center the website layout */
margin: 0 auto; margin-top: .8em;
text-Align: left; /* override body {text-align:center} */
}
div.header1 {
clear: both;
width: 100%;
height: 9em;
background: #ff0000;
color: #fff;
}
.title {
font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
.subtitle {
font-weight: lighter;
font-size: 1.4em;
}
The description of the problem is very confusing and does not explain what you want to achieve and what is your best attempt at that. You refer to left and right margin, but neither of them is set in your code for the elements discussed. You refer to setting display: block, but there is no such setting.
I will assume that you want the main title to appear (in the xy plane) above the subtitle. For this you need to set display: block or, better, use div markup instead of span or, best, use adequate heading markup such as h1 and h2 with due consideration of their default effects on vertical margins and font weight (i.e., overriding them in CSS if needed). And I assume that you wanted them left-aligned the same amount.
It seems that you did not take into account the relativity of the em unit. By definition, it equals the font size of the element (except in font-size, where it equals the font size of the parent element).
I suspect that you tried setting the left margin of both span elements using the same value such as 1em. But it does not mean the same for both elements, since their em sizes differ. If you wanted to set the their left margins to, say, the font size of the first element, you would set
.title { margin-left: 1em; }
.subtitle { margin-left: 2.6429em; }
The number 2.6429 is the ratio of the font sizes, calculated from 3.7/1.4.
It would be easier to just set a left margin on the enclosing div element. Its font size equals the font size of the body element, so if you wanted to set it to the font size of the main heading, you would use
div.header1 { margin-left: 3.7em; }
check the bellow link I hope this will help for you
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
px: pixels (a dot on the computer screen)
em: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
see the reference
So, you can use px instead em, its good practice.
Hope it will helps you. Thanks. !!