I'm making a small responsive website and I'm having a little problem.
While I was watching at a print-preview of my website, I noticed that the last line of my page was only printed half.
I know that the text block where this occurs has a "line-height:135%;" styling, to get a nice spacing between the lines when reading.
My printer mediaquerie doesn't overwrite this "line-height:135%;"-property, because I want to keep the nice line spacing when printed. Does anyone knows how to fix this?
I know I can fix this by setting the line-height, back to 100% in the print mediaquery, but I want to keep that spacing.
(Here is a picture of the problem: http://s7.postimg.org/5bf8tfqor/theproblem.jpg)
Thanks in advance.
edit:
this is the css I use to style the article, nothing fancy as you can see.
article {
margin: 60px 0 0 0;
font-size: 1.4em;
font-family: "Special Elite", cursive;
text-align: justify;
line-height:135%;
}
Related
My problem is that in my web page I want to create the design of a newspaper and I need to put my text with the alignment that usually in css we can do with this code:
.text-art{
text-rendering: optimizeLegibility;
text-align: justify;
word-spacing: -1px;
}
The problem is that the result create blank spaces between the words that ruins the legibility and the graphic of the entire text, as shown in this image:
Does anyone knows how can I solve the problem? Or if exist any javascript way to obtain a better result? Moreover my page is responsive so when I make the window little, the problem is bigger.
Hope you can help me! Thanks in advance!
Use word-break instead
.text-art{
text-rendering: optimizeLegibility;
word-break: break-all;
}
Your problem stands with the line length. Your lines are too short in terms of words/line. That is why the spaces between words are evident.
You have a few options:
Use smaller font size, so that more words fit on each line
adjust letter-spacing
Use left alignment
I would go with smaller font size for small windows.
It's been a while (2 years?) since I've done a bigger website. I'm now developing one and as usual, I ran onto some cross-browser difficulties.
The problem I'm solving now can be seen on the picture below - I have a page with a h2 element, which displays differently in Chrome and IE 11. The element has all the properties like line-height, font-size, padding, margin and so fort specified, but still displays differently. In one browser, the text is right on the top of the element, in the other one, it is in the middle. This causes some graphical issues and I can't seem to find a way to resolve this without writing a browser-specific css definition for each browser (Firefox does something similar to and is somewhere in the middle of these two - the text is in the upper part of the element, but not on the very top of it).
The other similar elements like h1 are affected as well.
I understand this is likely related to the way these browsers handle fonts and calculate their positioning, but at the moment, this doesn't help me much. I'd be grateful for any advice you might have, since I'm probably not the first one to be solving this.
EDIT:
I won't insert the HTML code here since this affects all these elements regardless of where they appear. For an instance, the text highlighted in the page is a normal h2 with the following CSS attributes:
color: rgb(0, 0, 0);
display: block;
font-family: 'Myriad Pro', Arial;
font-size: 22px;
font-weight: bold;
height: 27px;
margin-bottom: 0px;
margin-top: 20px;
text-transform: none;
width: 634px;
normal has this css:
font-size: 14px;
margin-top: 10px;
margin-bottom: 12px;
line-height: 17px;
So I've found a solution. Little surprising, but makes sense.
I'm using Typekit from Adobe, which is something like google fonts. I actually found out that the cause of this text-shifting is the fact that I'm using the typekit font. When I switched to Arial, everything was fine.
I also came acrticle which describes the topic: http://blog.typekit.com/2010/09/13/updating-vertical-metrics-for-cross-platform-consistency/
The problem has to do with baseline and em boxes set wrong in the given font I used. Switching to another font which had these properties set correctly fixed my problem.
Thanks for all your help guys.
I've got a problem with IE8.
I've got a select box to choose capacitance units pF, nF and mF.
Now, the text is a little bit down, even though I set padding:0, and it cuts the text.
And so the 'pF' option actually looks like 'nF' which is unacceptable.
I wonder if there is any fix at all. I can't think of nothing other than setting padding to 0 which doesn't work once again. Setting small line-height also doesn't do anything either.
CSS:
select {
width: 40px;
height: 16px;
padding: 0px;
font: 8pt Helvetica;
}
Any ideas?
Edit: There you go for JSFIDDLE:
http://jsfiddle.net/zuYsF/
See that 'pF' is selected by default, and it actually looks like 'nF'.
I don't think this is padding causing a problem, this might have more to do with line-height
So try setting the line height to the height of the box minus the border top and border bottom (which seems to be 4px in total judging by that image from looks...) that height is probably about 12px...
line-height: 12px;
If this doesn't fix it you will have to reproduce it in jsfiddle so we can tinker with the code to give an actual working example back to you.
Please note that form elements are notoriously unreliable styling wise, and you can't get away with everything. display: block can do wonders, but wouldn't help in this case.
This seems to be cheer limitation of the <select> tag styling... In all browsers really.
You might want to check this question, which doesn't seem totally unrelated.
I want to vertical-align text in select box
I have a TEXTAREA where spacing is very important. I formatted it as follows:
TEXTAREA {
font-family: Tahoma, Arial;
font-size: 8pt;
letter-spacing: 0px;
line-height: 13px;
}
How, if I enter some text, the line height is not correctly applied: The last line of every paragraph (before pessing enter or shift-enter) is one pixel to high:
This problem only occurs in Internet Explorer 9, not in Firefox 7 or Chrome 14 (haven't tested older versions so far).
Is there a way to get rid of thad?
BTW: It does not happen for the last line of the textarea, unless there is a linebreak behind it.
Regards,
Steffen
I know this may not actually help entirely nor be the full answer, but it may be worth while reading up a little on the use of !important declaration within CSS.
http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
The only reason why this springs to mind is there may be another style/declaration that is applied after which is causing some sort of problem and this will make sure your textarea has the correct styles applied to it.
You may also want to check that any <p> CSS declarations are not causing conflicts/problems with any bottom or top margin's/paddings? Same goes with span or any other styles that could potentially cause some sort of problems.
Like I said, I'm aware this may not help in the slightest but it could be a possibility.
I have had similar problems with the last line in a textarea in IE8. When my textarea had a line-height of less than 18px, the cursor changed the line-height. The reason I bring this up is your line-height of 13px is quite small. You may want to experiment with larger line-heights to see if the problem goes away.
I just went many many rounds with this issue and finally discovered that IE9 is adding extra padding to textareas. Line height, height, etc had no effect. This did the trick:
padding: 0px !important;
A few days ago I re-skinned my website. Development of this skin was primarily done using safari, and as expected, it all renders fine using firefox and opera. I've had to make a few small tweaks for IE7, but nothing much, except for one problem...
The date indicators for a post are cut off in IE. This problem seems to occur only on nested span tags inside a left floating div. I think I need the floating div's in order to layout text on the left and the right side of the screen.
Do any of you know how to stop IE7 from clipping my text?
Edit: I have sort of given up on this problem. My scripts now check for IE7 and feed it somewhat simplified HTML that its limited engine can handle. It works in IE8, so, for now, just the special case for IE7 will have to do...
In most cases where IE6 or 7 clips off the bottom of text, just add:
line-height: normal;
to the CSS rules concerned. Should fix it nicely, but as you'll understand, it expands the box too.
There's a hack I figured out that fixes the problem of cutting off text in IE. I noticed the last line in my headline was the only one being cut off.
My original CSS which was cutting off the last line in IE7 but looked fine in other browsers:
h2 {
font-size: 22px;
line-height: 1em;
}
See image of problem here: https://skitch.com/pablohart/f4g3i/windows-7-x64
The fix I did included simply adding padding to the bottom and then taking that padding back with negative margin. Like this:
h2 {
font-size: 22px;
line-height: 1em;
padding-bottom: 5px;
margin-bottom: -5px;
}
See picture of fix in this image: https://skitch.com/pablohart/f4g4h/windows-7-x64
The problem with line-height: normal; is that it takes on the default line-height for the font, usually 1.3em.
Try adding overflow: visible; to your .postdate class. Maybe that helps.
I had a similar problem. I changed my span to a div and the problem was resolved. I think IE7 might have an issue processing line-height on a span. Haven't confirmed that to be the issue. There were other CSS elements. (Working on someone else's code.) But changing from span to div (block) resolved the issue.
for the .bigdate class, try replacing margin with padding; seems to me that this has something to do with IE's margin-handling.
Adding a specific height to .title fixes it for me (in IE6):
.title {
PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;
Despite being unable to test it on my current machine: I would suspect that it's a hasLayout bug. The methods of dealing with it are listed in the "properties" section of that link.
In my experience its invariably the bottom of the text that gets clipped and that too basically because of the overlapping divisions. If you are able to ensure that the divs don't overlap then the issue does get resolved . That apart adding overflow: visible does help at times.
Try adding
div.postmeta { height: 100px; }
div.postdate { height: 75px; }
Arbitrary height value... but you'd know the exact height you want. That should keep the text containers from clipping in IE7.
I think the problem is with the padding. I tried removing a "padding: 3px" style and it worked properly. Previously it was not showing anything. Paul Hart's answer showed me that.
Probably also removing/overriding margin properties may also help.