Sent by Holly Bergevin on 7 November 2004 01:01
From: David Hucklesby [EMAIL-REMOVED]>
>Adapting Craig Saila's text shadows to a banner heading, I came
>across weirdness in IE Win when I applied some letter-spacing to
>the text. It's hard to explain, so I put up the code with a couple of
>screen shots to demonstrate.
>
>Kindly take a peek. Any help / suggestions most welcome:
><http://hucklesby.f2o.org/demos/ie-kerning.html>
Hi David,
I don't remember if you ever got any help with this (it's been awhile) but since the example page is
still up, I thought I'd offer my take on solving the problem, tested in IE6, Moz and Op7.
Instead of putting the letter spacing on the - h1 - , I moved it to the - h1.shadow - and - h1 font
- selectors. Then I wrote another selector that only IE/win will see, that changes the spacing on
the h1.shadow selector. All together, it looked like this -
h1 {
margin: 0; padding: 1em 0;
font-size: 175%;
line-height: 1.2;
}
h1.shadow {
position: relative;
left: 6px; top: 3px;
color: #33334D;
letter-spacing: 0.4em;
}
/* \*/* html h1.shadow {letter-spacing: 0.7em;} /* */
h1 font {
position: absolute;
left: -6px; top: -3px;
margin: 0; padding: 1em 0;
color: white;
letter-spacing: 0.4em;
}
It seems to withstand text-zooming, which is a good thing, I suspect.
hth,
~holly
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
