I don't know how much is the default font size, but anyway I want to reduce it by 2px.
<td style='width:30%; margin:0 5%; text-align:left;vertical-align:top;font-family:Tahoma, Arial, Helvetica;' font-size:'xx'>Some text</td>
What to assign the font-size attribute so that my text will be 2 pixels smaller. Thanx.
If you really truly want to have it 2px smaller, and you're happy to accept this'll only work on modern browsers:
font-size: calc(1em - 2px);
References:
Compatibility information at caniuse
Documentation at mozilla, or w3c
What you want is to use em's instead of pixels. Em's are represented in percentages relative to everything else so
font-size: .8em;
Would make it 80% of the size as the text around it.
See http://www.w3schools.com/cssref/css_units.asp for a good explanation on CSS units.
Related
Hello. I am having troubles with the format of how the three elements are presented! The html {font-size: 62.5%} in the styling is decreasing the font size of the entire page.
When I disable html {font-size: 62.5%} the three element are getting wider! Almost widescreen! It is getting too big! I wonder why the font-size: 62.5%; having such lot of effect how the 3 blocks are formatted! font-size: 62.5 is a font setting?
There is not text inside for the moment, but it still has effect on it. Why is the line so important for the presentation of the 3 blocks. Hope it is clear for everybody and someone could help me with this.
link
Fonts based on the html and/or body element are relational and like any other CSS properties and values applied to those selectors are inherited. There is a whole thing about relative font sizes and the CSS em unit. Arno's answer covers it pretty decently.
This is mostly to get you moving forward with less code. You can make the images scale with resolution. I'm at 2560x1440 so I had to downsize the browser window to see the issue. You should remove the width property and instead use max-width: 33%; (for specifically three images) which scales nicely without even needing CSS media queries for mobile.
Go easy on those div elements! I also highly recommend familiarizing yourself with what stable aspects of CSS are available, it's a great time to be a newbie compared to 15 years ago! I added CSS Flex (Grid isn't as mature yet) and it's extremely powerful once you get around it's quirks.
div.card
{
display: flex;
justify-content: space-evenly;
}
div.card img
{
display: block;
height: 18rem;
max-width: 33%;
object-fit: cover;
}
<div class="card">
<img alt="Snowy Mountains" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Desert" src="https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Canyons" src="https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />
</div>
The font-size: 62.5% is a critical part of how this layout work, this is because it's rem based. rem units are based on font-size on the root of the document to inherit it's value. Setting the font-size to 62.5% means 1rem is equal to 10px.
More about rem uses and styling here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/.
There are two ways you can solve this.
Changing all your font sizes to rem units. (my pick)
You can change the font-sizes from 16px to 1.6rem. etc.
Change rem unit to em and set parent font-size
You can also remove the font-size: 62.5% from the html selector to #global-3blocksfancy and change the rem to em this means the parent element (global-3blocksfancy) font-size will determine the size of the other elements.
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.
The problem is that Firefox and WebKit based browsers seem to align text vertically in different ways when contained in an element that has an even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar threads, but I haven't really seen any great explanations for my question.
Consider the following example:
.box {
font-size: 15px;
font-family: Helvetica, Arial;
background-color: Blue;
height: 20px;
width: 60px;
color: White;
line-height: 20px;
}
<div class="box">
A text.
</div>
Is there any way to fix this? Is there any "text-align" property or something that I missed?
This is due to differences in how browsers handle subpixel text positioning. If your line-height is 20 pixels but font-size is 15 pixels, then the text needs to be positioned 2.5 pixels from the top of the line box. Gecko actually does that (and then antialiases or snaps to the pixel grid as needed on painting). WebKit just rounds positions to integer pixels during layout. In some cases, the two approaches give answers that differ by a pixel. Unless you're comparing them side-by-side, how can you even tell there's a difference?
In any case, making sure that your half-leading is an integer (i.e. that line-height minus font-size is even) will make the rendering more consistent if you really need that.
This is browser rendering issue. Use line-height 1px less than the given height, for example:
.box
{
background-color: Blue;
color: White;
font-family: Helvetica,Arial;
font-size: 15px;
height: 18px;
line-height: 17px;
width: 60px;
}
If you are looking for a way to do an exact vertical align, check out Stack Overflow question Problem with vertical-align: middle; - I described a solution there.
If you want an answer why Firebug and Chrome display this differently, this will be a bit more complicated. Line-height alignment is based on font-line rendering and fonts can be handled in a very different way across the browsers. For example, font-smoothing and font-weight can really mess with your page.
Also, are you using CSS reset for this page? It contains font related adjustments as well, and it may help you to overcome cross-browser issues. Refer to CSS Tools: Reset CSS.
Ugh, terrible but true! I just ran into this trying to create tiny count bubbles on an icon - so small that I had to get right next to text so every pixel counted. Making the line-height 1x less than text-size leveled the display field between FF and Chrome.
Can someone help me vertically center text inside a div, consistently across browsers. In IE9 ONLY, text is one pixel closer to the top of the parent div. All other browsers render the text as expected.
Important: I'm using standards-mode:
<!DOCTYPE html>
Here's some example HTML:
<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>
Bit late to the party. However, I came across a similar issue recently. After some digging about I came across this article: Sub-pixel Fonts in IE9.
I think this is directly responsible for the issues of font vertical alignment in IE9. Unfortunately there doesn't seem to be a fix as this is a forced option or customisable by the user (not likely to happen).
So it looks like the only solution is to increase the line-height as mentioned previously.
You might want to look at the following:
CSS: Standard (dynamic) way to centralize an element in the y-axis
There are some useful references that will probably still apply to IE9.
Based on your code: you are setting the line-height in more than one place. Try removing the line-height:16px property in your inner div, in fact, get rid of the inner div since vertical-align will only affect inline elements.
Also, make sure your container height is big enough to hold the text (1.2*13) otherwise you may get into issues related to different fonts or different default font-sizes across browsers.
Probably what is happening is that 1.2*13 = 15.6, and depending how the browser rounds off floating point numbers, that could account for a 1 pixel shift. Set line-height to 16px instead of 1.2 and see if that works.
Second Try:
.outer {
background-color: red;
color: white;
width: 100px;
height: auto;
padding-top: 0px;
font-family: Arial, sans-serf;
font-size: 13px;
line-height: 5.0;
}
applied to:
<div class="outer">XXXXXXXXXX</div>
If anything will fix this, make the line-height large enough so that there is some space above/below the lettering. Set the container height to auto and let the line-height control the height of the container.
There is an answer to this question here:
http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html
I had the same problem with the 1px off text rendering, and it would only appear with font size 13px in IE9.
adding the css style
{
height: 16px;
line-height:16.99px;
}
to the surrounding div fixed the problem for me on IE7-9, FF and Chrome on Windows.
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
*/