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.
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/
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/
In the following fiddle, I am trying to find out why the div where the checkbox is placed is bigger than the content itself (which is only the image of an empty checkbox). I am trying to accomplish the same as seen on the fiddler but without the overlapping of the white background over the border of the underlying .
I think the problem is related to this css style:
.selectable-content label:after {
background: white;
color: #9fc5e8;
content:"\f096";
position:absolute;
}
You'll have to play with some of the bottom values in your media queries, but your white background was due to default line-height on the label.
http://jsfiddle.net/xtm9D/11/
Added:
.selectable-content > label {
padding-top: -5px;
font-family:'FontAwesome';
font-size: 32px;
cursor: pointer;
line-height:26px;
}
Messed around with your media queries as well.
The element created by :after contains the character, but also has a white background. As this element later in the DOM and positioned at the bottom-right of its parent, it will overlap the background.
This could be fixed by creating a translucent picture of the actual image, and removing the white color from the CSS.
Try setting the line-height. When I add the line
line-height: 31px
to
.selectable-content > label {...
the problem is resolved. I initially set line-height: 32px, but there was still a pixel of white. You are going to need to find a consistent way to position the element and set the line-height in relation to the checkmark character to resolve the overflow.
I'm deep into some iPhone (Safari/WebKit) web app development at the moment and want to have items of a set height with title text and body text such that 3 lines are always showing. If the title text is short, 2 lines of body text should show. If the title text is very long, it should take up a maximum of 2 lines and leave 1 line for body text. Whenever text is truncated, it should display an ellipsis as the last character.
I've come up with the following that does everything I need, except that it does not display the ellipsis. Is there a way to get this solution to satisfy that last requirement?
(source: segdeha.com)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
width: 100px;
}
p {
/* white-space: nowrap; */
font-family: Helvetica;
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
border: solid 1px red;
}
strong {
/* white-space: nowrap; */
font-size: 16px;
display: block;
text-overflow: ellipsis;
max-height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>
<strong>Short title</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
<p>
<strong>Long title that will span more
than 2 lines when we're done.</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
</div>
</body>
</html>
One solution to this problem is to fade the text out rather than to add an ellipsis. If this is an acceptable alternative for you then please read on.
Since the line height is fixed at 16px you can use a simple png image with a gradient (or use a css3 gradient) that goes from transparent to the relevant background color and position it in the lower right corner of the paragraph.
The same will work for the headline if you position the gradient image 16px from the top so that it will only be visible if the heading reaches two lines (thanks to overflow hidden).
You can specify the font size to be used within this field (font-size), then fix the height and width of the field (because now you know how many lines of font-size size can fit), and then use the overflow property (not text-overflow)
Try this one: jsfiddle.net/7BXtr/.
It only uses CSS (no JavaScript).
Basically, the text has overflow: hidden applied, and ... is positioned after it.
Downsides:
An ellipsis will always appear after the description, even if it is short.
The ellipses always appear at the same positions on the right.
I know this is too late of a response. But for others looking for the same problem:
I am developing on top of Magnus Magnusson answer.
To create a translucent shade, you can use the box-shadow property which can be used to create an inner shade effect.
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;