Re: [WSG] working with line-height

2009-07-03 Thread Simon Pascal Klein
Line-height (leading) is measured from baseline[1] to baseline rather than from the ‘end’ of a glyph the the ‘tip’ of another. It is essentially impossible to align ‘perfectly’ the top of say an uppercase character to a horizontal line above it in CSS because of this, and because many

Re: [WSG] working with line-height

2009-07-02 Thread Matijs
I frequently have to work with pixel-perfect design http://aspnetresources.com/blog/dear_art_director.aspx , and I'm always having trouble with line-height in particular. Please take a look at this example: http://www.hellobenlau.net/wsg/index.html

Re: [WSG] working with line-height

2009-07-02 Thread Paul Novitski
At 7/1/2009 07:19 PM, Ben Lau wrote: This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gifhttp://hellobenlau.net/wsg/eg.gif So there'll be a div with padding top and bottom of 20px, and with text inside. This doesn't look to me like a line-height topic at all. If you

RE: [WSG] working with line-height

2009-07-01 Thread Ant Tears
Hi Ben, It seems that the short answer to your question is a base line-height of 0.8 (yup, unitless). My guess would have been the value 1 but I don't know enough about browser default styles to say why 0.8 seems to work. I've only checked this using IE8 and Firefox 3.5 using the developer tool

Re: [WSG] working with line-height

2009-07-01 Thread Chris F.A. Johnson
On Thu, 2 Jul 2009, Ben Lau wrote: I frequently have to work with pixel-perfect design, There is no such thing. and I'm always having trouble with line-height in particular. Please take a look at this example: http://www.hellobenlau.net/wsg/index.html Where you state, This text

Re: [WSG] working with line-height

2009-07-01 Thread Russ Weakley
Hey Ben, That additional space you see above the letters is set aside for diacritical marks (umlaut etc). If you replace the content within the 23 pixel paragraph with the content below, you should see that all the special character marks sit above the letters and fill this empty space.

Re: [WSG] working with line-height

2009-07-01 Thread Joseph Taylor
Ben, On the spacing, the spaces you're fighting with are a combination of line-height, margin and padding. Each browser will implement their own defaults, so resetting the defaults with a reset stylesheet has become a popular technique. For example, if you apply a line like this to your

Re: [WSG] working with line-height

2009-07-01 Thread David Hucklesby
Joseph Taylor wrote re: http://www.hellobenlau.net/wsg/index.html Ben, On the spacing, the spaces you're fighting with are a combination of line-height, margin and padding. Each browser will implement their own defaults, so resetting the defaults with a reset stylesheet has become a popular

Re: [WSG] working with line-height

2009-07-01 Thread Gunlaug Sørtun
Ben Lau wrote: http://www.hellobenlau.net/wsg/index.html I'm wondering if there was a way to top align the text to its line-height. So say, with text size 20px, could the top of the 'T' be aligned to the top of the pink box? Is this what you want?

Re: [WSG] working with line-height

2009-07-01 Thread Joseph Taylor
David, What form elements / what browsers do you mean? I'm curious as I haven't seen anyone make comments against reset stylesheets as of yet. Joseph R. B. Taylor /Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone:

Re: [WSG] working with line-height

2009-07-01 Thread Ben Lau
Hi Georg, Close, but this poses bit of layout issue surrounding the text. This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif So there'll be a div with padding top and bottom of 20px, and with text inside. If I do: div style=padding:20px 0 psome text/p /div The gap would

RE: [WSG] working with line-height

2009-07-01 Thread Mark Henderson
Joseph Taylor wrote: David, What form elements / what browsers do you mean? I'm curious as I haven't seen anyone make comments against reset stylesheets as of yet. To reiterate David's point, I sent the below earlier (but due to server updates many months ago my *true* email was changed,

Re: [WSG] working with line-height

2009-07-01 Thread Joseph Taylor
To clarify what I do in the real world: I use a reset stylesheet then reapply my own defaults so my own form elements appear fine. You're correct about the !important declaration - that shouldn't be there for the resets. My mistake. Joseph R. B. Taylor /Designer / Developer/

Re: [WSG] working with line-height

2009-07-01 Thread Gunlaug Sørtun
Ben Lau wrote: This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif So there'll be a div with padding top and bottom of 20px, and with text inside. If I do: div style=padding:20px 0 psome text/p /div The gap would include both the padding and the anonymous inline boxes

RE: [WSG] working with line-height

2009-07-01 Thread Mark Henderson
Joseph Taylor wrote: David, What form elements / what browsers do you mean? I'm curious as I haven't seen anyone make comments against reset stylesheets as of yet. To address the question (oops, forgot about that one) this is all I could find in my bookmarks, but it is only in regard to