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
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
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
Hi list,
I frequently have to work with pixel-perfect design, 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
I'm wondering if there was a way to top align the text to its line-height.
So say, with text
...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Ben Lau
Sent: 01 July 2009 16:20
To: wsg@webstandardsgroup.org
Subject: [WSG] working with line-height
Hi list,
I frequently have to work with pixel-perfect design, and I'm always having
trouble with line-height in particular. Please
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
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.
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
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
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?
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:
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
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,
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/
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
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
16 matches
Mail list logo
