Sitepoint Members,
I read that line-height should be used on all block elements except body and H1-6. But would you really use line height on both a <div> and a <p> when the <p> is under control of the <div>. Is it that you use line-height on <p> when there’s no tag controlling the <p>, although that doesn’t make sense since <body> is a block element.
Thanks,
Chris
I’ve looked and looked on the web and can’t get anywhere on this question, must be a tough one.
Hi,
Thread moved to CSS forum as more appropriate than the graphics forum 
I read that line-height should be used on all block elements except body and H1-6.
That’s nonsense and the body (and heading tags) are the first place that should apply line-height or it will be down to the browsers default and vary between browsers.
You can apply line-height to a div but some elements like headings and p elements will have a default font-size and line height supplied by the browsers defaults so you need to apply the line-height to those elements directly as they will not inherit form the parent because they have more specific rules.
More info on line-height here, [URL=“http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/”]here and [URL=“http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/”]here.
Paul O’B,
I read those pages and it looks like the solution is html {line-height: 1.0}.
But on this page
http://reference.sitepoint.com/css/line-height
it says
Internet Explorer for Windows versions up to and including 7 will use the wrong line height if the line box contains a replaced inline element, such as an image or a form control.
I have no idea what he’s saying. My guess is that he’s talking about using units on line heights - which I plan on not doing.
So if I use
html{line-height: 1.2} will it mean that line height is 1.2 except when I’ve declared a line height elsewhere?
This all came about when DS60 helped me out with some errors in my coding of my site. I fixed a bunch of stuff, now I’m working on this he wrote:
Probably the biggest issue, and likely explaining why it’s a bit screwy looking on my large font/120dpi system, is your lack of declaring line-heights when you change font-size. The default line-height cannot be trusted, you change font-size, change font-height – at which point one might as well just use the entire “safe” cross-browser condensed property.
So I did some research and found this,
http://www.richinstyle.com/masterclass/fonts.html
where the author writes that line-height should be used on all block elements except body and H1-6.
So you say html{line-height: 1.2} is all I need?
Thanks Paul,
Chris
Only if you want cramped text and lines very close together. Most of the time you should be looking at about 1.4 for ease of use.
But on this page
http://reference.sitepoint.com/css/line-height
it says
Internet Explorer for Windows versions up to and including 7 will use the wrong line height if the line box contains a replaced inline element, such as an image or a form control.
I have no idea what he’s saying. My guess is that he’s talking about using units on line heights - which I plan on not doing.
No “he” (actually that’s me) is describing a bug where IE7 and under get the line height wrong when an image or form control is in the same line. It has nothing to do with units at all. The line height collapses to the size of the replaced element (replaced elements are things like images and form controls) instead of obeying the greater line-height when set.
The difference when you add units to line-height is in the computation handed down to the children. If you say line-height:1.2em then the browser will work out what that is in pixels (e.g if the font size was 20px then the line height would be 24px). The line height is 24px which is fine for an element with 20px font size but if you have nested elements that have a smaller font-size (say 10px) then they still get the 24px line-height and may look silly. Using unit-less line-height means that the 1.2 is used as a scaling factor and the scaling factor is passed down to the children and not the computed pixel line-height. For the example above the child at 10px font-size would only get a line-height of 12px as opposed to the 24px from the unit version.
So if I use
html{line-height: 1.2}
Don’t use the html element for styling use the body element instead. All you usually need to apply to html is margin:0;padding:0. Apply any other styles to the body.
will it mean that line height is 1.2 except when I’ve declared a line height elsewhere?
It will mean that the line-height in the body is 1.2 times whatever the font-size is for that element. Nested elements will have a line-height 1.2 times the size of whatever their font-size happens to be.[B]
UNLESS[/B] more specific browser, user or author styles apply. In the case of headings and p elements then the browser default sheet will most likely have set line-height for that element so you will need to set it again to what you want.
This all came about when DS60 helped me out with some errors in my coding of my site. I fixed a bunch of stuff, now I’m working on this he wrote:
Probably the biggest issue, and likely explaining why it’s a bit screwy looking on my large font/120dpi system, is your lack of declaring line-heights when you change font-size. The default line-height cannot be trusted, you change font-size, change font-height – at which point one might as well just use the entire “safe” cross-browser condensed property.
What he is saying is that when you declare the font-size for an element then at the same time you should also set the line-height that you want. Otherwise you may change the font-size size considerably from the default but be stuck with whatever the default line-height was.
Just be safe and sure.
e.g.
p{font-size:120%;line-height:1.4}
So I did some research and found this,
http://www.richinstyle.com/masterclass/fonts.html
where the author writes that line-height should be used on all block elements except body and H1-6.
That’s an old article and you misread it. The author goes on to say “On these elements I recommend that you specify line height via the font shorthand.”. I don’t see the point of that comment anyway as you will still be setting the line-height whether you do it longhand or shorthand and in fact the way stated has managed to confuse you.
So you say html{line-height: 1.2} is all I need?
No it would be body{line-height:1.2} but I would still set line-height for my hn,p, ul ol etc when I use them.
The inline box model of which line-height is a part is a very complicated thing indeed.
Paul O’B,
That’s great information. I really appreciate your time and effort to straighten things out for me. One last thing, to simulate DS60s large font/120dpi system, all I have to do is change my screen resolution to like 600 by 800, right? If not, is there a tool online where I can check my site on a 120dpi “sytem”? (I assume he means monitor.)
Thanks again Paul,
Chris
120dpi/large fonts (now called medium in Win7 since it has an even larger 144dpi option) is NOT about screen resolution OR monitor size, it’s about the actual OS level system metric.
In windows 7 you go into Control Panel -> Display and it should be the default page – smaller (100%), medium (125%) and larger (150%) – corresponding to 96,120 and 144. In XP it’s under display properties -> advanced (been a while since I’ve set it in XP)…
One of the best ways to test it is to make a standalone install of Opera, and go into tools -> advanced -> fonts, and change “web page normal text” from 16 to 20.
DS60,
What are those units for 16 and 20 (if dpi I dont understand, since you referred to 120 earlier) and how many different settings are there other than 16 and 20 that I should worry about?
Thanks DS60,
Chris
DS60,
Don’t answer that last question - I changed the dpi on my computer to 120 and my site looked fine. Maybe the code you gave me:
html,body,div,form,fieldset,caption,h1,h2,h3,ul,li,table,tr,td,th,p,img{margin:0;padding:0} img,fieldset{border:none}
had something to do with the dpi stability on my site. Does my site still look roughed up in your large font/120dpi system ?
Thanks,
Chris
DS60,
'Never found “tools” in Opera. No such “advanced” nor “fonts” in “Developer Tools”.
Chris
Turn the real menu back on, instead of the goofy ‘combined’ one. Under the “opera” button choos “show menu bar” to make it useful again.
Though I think in the new goofy “shove every useful command under one useless button” UI, it’s “settings -> preferences” instead of “tools -> preferences”.
In any case I was refering to the master preferences panel for the entire browser… the one you actually configure things from?
There was no 20 but I chose 21, everything looked fine, and then chose 96 and my site looked fine. Is that the test you were thinking of?
Thanks