The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn't) it has been placed in a smaller element with overflow: hidden;.
Anyone know how to remedy this?
You need to specify the line height to match the font size...
CSS
h1 {
font-size: 2em;
line-height: 2em; /* or 100% */
}
See also IE7 is clipping my text. How do I adjust its attitude?
I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:
(a) "height" does not affect what's happening inside the textbox;
(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;
(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;
(d) "vertical-align" provides a reference point for the text inside the textbox.
So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:
line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;
The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.
BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )
Hope this helps.
Try changing the overflow attribute for the element the text is in.
Overflow: auto;
Or
Overflow: Visible;
Related
I am trying to learn some CSS and I currently struggle with the following problem: in the following code if you will try to edit text inside of the span, the cursor (big blinking line) is too huge.
Is there a way to make it the same size of the text, while having everything else looks the same (I assume that my css is not really good, so it can be changed).
.thumbnail-descr{
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
outline:none;
}
P.S. The problem is with my line-height inside of the .square, but removing it will remove my text from being in the center.
The problem is your massive line-height. I realize that you do this to vertically center the text, but you are going to have to find another way. Since you are using set height, you can just use top or margin-top to push the text down to midway.
http://jsfiddle.net/M4fKM/4/
If you want to cover the case of your text going onto multiple lines, you can use the translateY(-50%) transform.
http://jsfiddle.net/M4fKM/5/
Let me explain my view of the difference between line-spacing (which I would like to emulate), and line-height, using this picture:
Here you can see text with line-height > 1 inside a container with padding. An extra visual whitespace is added to the top and bottom of the text, and I want whitespace to be added between the lines only.
Why I (and you) may need this feature, emulated line-spacing? Because if you have buttons or images inside this container alongside with text with line-height > 1, text and images will look misaligned. Text has extra whitespace added to the top and the bottom, which causes edge of the text look more far from the container border.
To avoid this, I manually add negative margins to the text:
h1 {
font-size: 30px;
line-height: 42px; /* or 1.4 */
margin: -6px 0 -6px 0;
}
So what's the problem?
I am very dependent on font-size in pixels. I need to recalculate margins after every change of font-size or line-height, and I have to calculate it for h3, p and so on.
I'm looking for some way to automate this (some magic I'm missing).
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline.
http://nostalgia.mx/light2.html
Open the site with both firefox+ie and chrome and you'll notice the profound differences:
1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional.
2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.
OK. So my question is:
Is it possible to make Chrome's look like FF/IE's?
Regards
Sotkra
The phenomenon can be observed in a simple setting where you just have an element with a large font size and you set text-decoration: underline on it. Browsers implement this in different ways regarding the width of the underline. There is no way to affect this in CSS. The CSS3 Text draft has nothing about this, even though it has properties for affecting other features of underlining. In discussions, a property for setting underline has been proposed.
If you wish to simulate underlining by using border-bottom, you can, with some extra complications in markup and CSS, set the width (and color and position). Example:
Heading
with style
h1 { font-size: 150px; }
h1 { border-bottom: solid 0.05em; display: inline-block; }
h1 span { position: relative; top: 0.2em; }
Demo: http://jsfiddle.net/yucca42/Qdeek/
In this approach, you would need to take care of setting the heading on one line and using suitable top and bottom margins (probably with settings on other elements, maybe wrapping the element inside a div container), since display: inline-block removes normal heading rendering style.
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.