I've been helping a friend change the layout of his site (mostly css changes) at the moment I'm just fine tuning it a bit and have run into a problem. To begin with, here is a sample of the site. The problem is the titles for the posts, i want there to be less padding on the top and the bottom so that the background isn't taller than the text when you hover on them. I've tried changing margins, and padding, pretty much tried everything. Increasing the padding works fine but i can't seem to get it less than it is at the moment. I know it should work because it's modelled after the titles in another site. Can anybody see where the problem lies? Thanks
If I'm understanding correctly, you want to change the amount of empty space around the main post title. If so, adjust line-height:
#content .post .title h3 a {
text-align: left;
-webkit-transition: color 0.25s linear;
font-size: 36px;
letter-spacing: -1px;
font-weight: 750;
line-height: 50px; /* Change this */
color: #444444;
text-decoration: none;
padding:0px 0px;
}
Example with line-height (overly) reduced: http://jsfiddle.net/AH9VP/3/
See also: http://www.w3.org/wiki/CSS/Properties/line-height
However...Note that in spite of changing line-height (which definitely reduces spacing), there seems be a limit on how much the browser will constrain the box when you hover on the text. This is (I think) because the browser is allowing space for glyphs at the top/bottom (like the tail of the "y" in "usually").
This topic is somewhat related: https://stackoverflow.com/a/11857786/453277
I know it should work because it's modelled after the titles in
another site.
It would be helpful to see the other site, in case I've missed something.
Related
I'm just wondering if there is a nice clean way in which to negate the letter-spacing property slight problem when you need to center text. Note to best see the problem, make the jsfiddle preview window small enough so the text wraps on to two lines.
HTML
<div class="centered--element">
<div class="center--line"></div>
<h1>This is a example here</h1>
</div>
CSS
.centered--element{
background: #f2f2f2;
text-align: center;
text-transform: uppercase;
}
/* problem property.. */
h1{ letter-spacing: 20px }
I've made this to demonstrate the problem: http://jsfiddle.net/tq3Gh/1/
Perhaps it's just me, but it's not looking 100% central. Please see:
However, removing the letter-spacing and it sits as one would expect. So to me there is an issue..
Here is the same example, but without letter spacing set:
Update
I've a better idea of the problem therefore I'm updating the question to make more sense and sum the problem up a whole lot better.
Ok so after much playing the problem is letter-spacing adds spacing to the right of each letter, INCLUDING the last letter, hence why I'm getting this issue. So, in order to negate this I'm going to try simply using margin-right: -(width of my letter spacing). I'm not sure if this will cause problems, but it beats another option where I could wrap spans around the elements I want to have letter-spacing — but that's far too ugly for me.
So my update CSS would look like:
h1{ letter-spacing: 20px; margin-right: -20px; }
ok, so actually its not a problem. Your center--element is 100% wide so actually the texts goes behind the the 2 columns in the side.
to show that I tired reducing opacity of side elements here
and when you actually give margin to the center--element it solves your problem here
.centered--element{
background: rgba(0, 0, 0, 0.1);
text-align: center;
text-transform: uppercase;
margin-left:90px;
margin-right:90px;
}
Final Solution
It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side
.spacing2 {
letter-spacing:0.9em;
text-align: center;
text-indent: 0.9em;
}
Final DEMO
The issue does indeed stem from using letter-spacing. According to the standard, when you increase the letter spacing the layout engine considers that extra space after the letter to be part of the letter's width. So that extra space you see on the right is, in a way, what you asked for.
What it seems you want is for the letter spacing to put the actual letter in the middle, and surround each letter on both sides with letter-spacing/2. But I'm not sure that's a feature of CSS. In fact, the letter spacing algorithms are user agent-dependent, so this may even work in different ways on different browsers.
So you're left with ways to hack around this problem, like adding a -1em right margin/padding, but probably without a "true" solution.
I have edited your css and added margin to left and right:
CSS:
.centered--element{
background: #f2f2f2;
text-align: center;
text-transform: uppercase;
margin-left:90px;
margin-right:90px;
}
Also I have mentioned in the DEMO , how to dynamically set letter spacing :
JS:
document.getElementById("myHeading").style.letterSpacing="15px";
Hope this helps.
I've made a javascript function to correct this behaviour. It takes the last letter of the matched elements text and creates a span with no letter spacing, and then compensates the width adding an extra margin (equal to the original letter spacing).
You may need to limit it's input to leaf nodes, but it works really well, specially if you need to underline the text.
var fixLetterSpacing = function(selector) {
$(selector).each(function() {
var that = $(this);
var text = that.text();
var last = text.substr(-1);
that.text(text.substr(0, text.length-1))
.append($('<span>').text(last).css({ letterSpacing: 0 }))
.css({ marginRight: that.css('letter-spacing') });
});
};
Text Selection Highlighting too much on either side because of padding.
http://jsfiddle.net/JamesKyle/pA7BJ/
How do I fix this using CSS? I've tried a bunch of different things, none of which seem to work. (i.e. trying to use margin and other properties).
I've run into this issue several times and have never been able to figure it out.
If someone could show me how to fix this and maybe explain how the text selection highlight is calculated, I would very much appreciate it.
It appears that this isn't occurring in Firefox/Opera (can't test IE), and it may be limited to webkit-based browsers.
SOLVED:
Add position: relative to any padded elements (this is likely a webkit bug).
http://jsfiddle.net/JamesKyle/ejfsM/
This is strange. However, changing CSS position seems to work, e.g.:
div.sizing-container {
padding: 75px;
position: relative;
}
http://jsfiddle.net/LJLdW/
Don't know if that is possible in your situation.
Changing the padding of div.sizing-container to 75px 0px 75px 0px would fix this issue.
The highlight is so large because of the padding on this element.
Then you need to change add:
width: 93%;
padding-left: 3%;
To the body. And then add 10px padding to .sizing-container
That fixes it for me. Thats all I can say.
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.
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.