 | |
Line spacing not working
HTML Writing HTML for the Web (comp.infosystems.www.authoring.html)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Line spacing not working -
10-27-2009
, 08:47 PM
#2
| |||
| |||
|
|
I’m having trouble with “line spacing.” The problem is that the 2nd line (below it) is too close, is touching the line above. If you’d like to look at my site, it’s at: 211alamedacounty.org The problem is in the 4 “headlines” at the top of the home page. For example, the words: “Alameda County Public Health Department Announces H1N1 Flu Vaccination Schedule” If you have the screen sized so it fits in 2 lines, then it looks fine. However, if you size the screen so it shows in 3 lines, then the lines are too close together, touching each other. |
The first thing to do is to remove completely *all* the line-height
rules in your CSS. That will fix this problem. Want to know why and what
else you should be doing or not doing?
(psst... John H., better sharpen that red pencil of yours <g>)
--
dorayme
#3
| |||
| |||
|
|
In article dda4be12-5faf-4855-a72e-ce34720371e4...oglegroups.com>, Bill <bill_activist (AT) yahoo (DOT) com> wrote: I˙m having trouble with ´line spacing.ˇ The problem is that the 2nd line (below it) is too close, is touching the line above. If you˙d like to look at my site, it˙s at: http://211alamedacounty.org/ The problem is in the 4 ´headlinesˇ at the top of the home page... If you have the screen sized so it fits in 2 lines, then it looks fine. However, if you size the screen so it shows in 3 lines, then the lines are too close together, touching each other. The first thing to do is to remove completely *all* the line-height rules in your CSS. That will fix this problem. Want to know why and what else you should be doing or not doing? (psst... John H., better sharpen that red pencil of yours <g>) |
and heartless today so maybe I should just remain quiet if he does ask. The
poor fellow probably has feelings, you know.
--
John
Why don't people frequent a.h.critique anymore? Is it me? My breath?
#4
| |||
| |||
|
|
On Wed, 28 Oct 2009 12:09:15 +1100, dorayme wrote: In article dda4be12-5faf-4855-a72e-ce34720371e4...oglegroups.com>, Bill <bill_activist (AT) yahoo (DOT) com> wrote: I˙m having trouble with ´line spacing.ˇ The problem is that the 2nd line (below it) is too close, is touching the line above. If you˙d like to look at my site, it˙s at: http://211alamedacounty.org/ The problem is in the 4 ´headlinesˇ at the top of the home page... If you have the screen sized so it fits in 2 lines, then it looks fine. However, if you size the screen so it shows in 3 lines, then the lines are too close together, touching each other. The first thing to do is to remove completely *all* the line-height rules in your CSS. That will fix this problem. Want to know why and what else you should be doing or not doing? (psst... John H., better sharpen that red pencil of yours <g>) Heh, I'm ready, but I don't think the OP will be. I'm feeling rather cruel and heartless today so maybe I should just remain quiet if he does ask. The poor fellow probably has feelings, you know. |
sizes I think he has fundamentally misunderstood the line-spacing
property where he really wants to adjust margin and padding.
Most times one should just leave line-spacing alone, but if you do then
I recommend a ratio value for example "line-spacing: 1.5". Certainly not
varied throughout the document, the result would look poor like folks
who use too many fonts or colors in a single document.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
#5
| |||||
| |||||
|
|
If you'd like to look at my site, it's at: http://211alamedacounty.org/ |
useful in a sense, though questionable in many ways, and surely not an
excuse for not providing a URL proper.
Quote:
|
Aside of the fact that the OP should stop using px units for his font sizes |
has been so for some time, as the HTTP headers announce that the page was
last modified in February). Point sizes for fonts are roughly as bad as
pixel sizes, but they are still a different monster.
Quote:
|
I think he has fundamentally misunderstood the line-spacing property where he really wants to adjust margin and padding. |
points. For example, on Firefox, the user can conveniently override author's
font size settings by increasing the font size even when it has been given
in points or by setting a minimum font size. When line-height is set in
points, well, I hope everyone sees the problem.
Quote:
|
Most times one should just leave line-spacing alone, |
usually too small for font faces and sizes authors tend to use, and setting
line-height (to any value) helps to avoid some nasty browser bugs.
Quote:
|
but if you do then I recommend a ratio value for example "line-spacing: 1.5". |
it gets ignored). More commonly,
* { line-height: 1.3; }
is a useful setting. You could make the value 1.33 or even 1.35, but
anything over 1.4 tends to be too much for commonly used fonts (i.e., Arial)
when line length is reasonable.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
#6
| ||||
| ||||
|
|
Jonathan N. Little wrote: [...] If you'd like to look at my site, it's at: http://211alamedacounty.org/ Strangely, someone's newsreader has changed a server name to a URL. That's useful in a sense, though questionable in many ways, and surely not an excuse for not providing a URL proper. |
Quote:
|
Aside of the fact that the OP should stop using px units for his font sizes As far as I can see, the page declares fonts in points, not pixels |
as you also noted.
Quote:
|
I think he has fundamentally misunderstood the line-spacing property where he really wants to adjust margin and padding. That's quite possible, it's surely bad practice to set line-height (!) in points. For example, on Firefox, the user can conveniently override author's font size settings by increasing the font size even when it has been given in points or by setting a minimum font size. When line-height is set in points, well, I hope everyone sees the problem. Most times one should just leave line-spacing alone, I disagree. There are two basic reasons to set line-height: the defaults are usually too small for font faces and sizes authors tend to use, and setting line-height (to any value) helps to avoid some nasty browser bugs. |
should just leave line-height alone rather than diddle with in without
understanding what line-height property does...
Quote:
|
but if you do then I recommend a ratio value for example "line-spacing: 1.5". That's too much for most cases (and uses a wrong name for the property, so it gets ignored). More commonly, * { line-height: 1.3; } |
great in most cases, I just chose a number that was *not* the default
1.0 to 1.2 to illustrate an *intentionally custom* setting. I feel
sometimes showing examples of properties being set to default values can
be misleading for novices...seems to be evident in stylesheets in the
wild bloated with unnecessary rules defining the defaults. Also what
better way to illustrate what a property does (for educational purposes)
than to set it value dramatic enough to be plainly visible? I was
recommending the use of a *ratio* value, the 1.5 was just an *example*
value not a *recommended* value. Is that clearer?
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
#7
| |||
| |||
|
|
In article dda4be12-5faf-4855-a72e-ce3472037... (AT) h40g2000prf (DOT) googlegroups.com>, The first thing to do is to remove completely *all* the line-height rules in your CSS. That will fix this problem. Want to know why and what else you should be doing or not doing? (psst... John H., better sharpen that red pencil of yours <g>) -- dorayme |
Thank you, Yes, that did it, just removing all the "line-height"
references fixed the problem. Thank you for your help. I'm probably
too afraid to ask for other comments...
Funny how in this newsgroup, y'all seem to be talking to each other
about the problem, instead of talking to the person who asked the
question. I'm reminded of one of those sitcoms; "You know I'm still in
the room, right?"
#8
| |||
| |||
|
|
Dorayme, Thank you, Yes, that did it, just removing all the "line-height" references fixed the problem. Thank you for your help. I'm probably too afraid to ask for other comments... Funny how in this newsgroup, y'all seem to be talking to each other about the problem, instead of talking to the person who asked the question. I'm reminded of one of those sitcoms; "You know I'm still in the room, right?" |
A few things:
1. dorayme does not have a capital d - it is all in lower case.
2. This is Usenet - and Google Groups is reading the information from
it. It would be better for you to get a real news client, and subscribe
to a news server. You can Google for that information.
2. Usenet is for discussion of topics, it's not a 24/7 helpdesk. If you
happen to get an answer to a question within the discussion, it's a good
thing, but not guaranteed. A lot of times, you will gain more knowledge
observing the discussion than if an answer is given right to you. In
this instance, the discussion about line height was very informative and
something you can put away for another time.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
#9
| |||
| |||
|
|
A few things: 1. dorayme <snip 2. This <snip 2. Usenet <snip |
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
#10
| |||
| |||
|
|
On Oct 27, 6:09Â*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article dda4be12-5faf-4855-a72e-ce3472037... (AT) h40g2000prf (DOT) googlegroups.com>, The first thing to do is to remove completely *all* the line-height rules in your CSS. That will fix this problem. Want to know why and what else you should be doing or not doing? .... Thank you, Yes, that did it, just removing all the "line-height" references fixed the problem. Thank you for your help. I'm probably too afraid to ask for other comments... Funny how in this newsgroup, y'all seem to be talking to each other about the problem, instead of talking to the person who asked the question. I'm reminded of one of those sitcoms; "You know I'm still in the room, right?" |
example, I said not to use line-height at all because I sense you are
not quite ready to use it, it being a tricky little tool. Jonathan said
much the same thing (naturally not quite with my elegant brevity). And
JK gave a valuable tip that you could simply use without understanding
much about the matter (a fact about improving the general browser
default settings for line-height). This last is an interesting matter in
that you would need to read the group a while to see from whom you can
generally trust a tip. (With me, you have to be a bit careful because I
like to go for a few wild rides now and then.)
Line height *is* a bit tricky and it is best not to use it (except at
the body level - sans units - to slightly increase it for the reasons JK
gives) unless you understand a few basics about it in a bigger context
than: "putting *this* line-height *here* makes the distance between this
and that text on *my* browser seem about right...".
The reason it is OK to keep out of what can be a hornet's nest is that
*perfectly serviceable* line heights are naturally used by the browser.
These days, browsers use a hidden but very detailed default stylesheet
(like yours in the head of your doc, but much more comprehensive). These
stylesheets are the product of a lot of intelligence and it is only safe
to change the defaults if you are confident you can do better.
Now, without understanding all about line-height, you can simply employ
two good practice rules.
1. Avoid using units for line-height, use a pure number.
2. Stay close to 1.3
Why avoid units? Because a unit, for example, an inch in a print CSS
sheet, will be hopelessly inappropriate for wrapping text descendant
elements where the text size is set different to the parent element.
Whereas, using a pure number, it acts as multiplier of whatever text
there is. Here is something I cobbled together a while back, you might
find it helpful:
<http://netweaver.com.au/alt/line-height_demo.html>
Why read the lucid explanations of HĂĄkon Lie, the father of Style
Sheets, on this when you can read me? It would be simply absurd.
--
dorayme
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.