On 09/08/05, David Keith Biddix <[EMAIL PROTECTED]> wrote:
> I am a Mac designer who is developing a new Website using CSS,
> instead of using just the old table layouts that I have relied on in
> the past.
>
> The page in question is located at:
>
> http://www.woodyscottages.com/
>
> My problem is this. The "card" on this front page looks fine in
> Firefox, IE and Safari for the Mac OS, but when I look at it in IE on
> Windows XP, leading and kerning of the font is off and everything
> moves around so that it renders the page unreadable.
>
> The background graphics are sliced up and placed in a table to hold
> them together properly, with the text riding in CSS "layers" over the
> top of the graphics.
>
> I am using Trebuchet MS for the font, something that is fairly common
> in the computing world. I chose my font sizes in my CSS in pixels,
> not points or ems. I also am using classes for my fonts and sizes in
> the CSS, bypassing the traditional HTML tags of <p>, <body> and <h1>.
>
> I'm wondering 1. Why is there such a discrepancy in the way these
> fonts show and 2. Is there a way I can get the Windows version to
> render more like the look of the Mac version (pulling the words
> together so that everything lines up the way it is supposed to.
>
> My CSS is at:
>
> http://www.woodyscottages.com/site.css
>
> if anyone would like to take a look at what I've done.
>
> Any suggestions would be most welcome!
>
> David Biddix
> http://www.pegasuscreations.com
hi David
Quick fix? Add this:
p {margin: 6px 0; padding: 0; line-height: 1.2}
... but I think this page has more fundamental problems. The visual
layout of this page is very fragile - it's totally dependent on a
specific font at a specific size. What happens when someone with poor
vision increases the text size, so they can read it?
I'd suggest considering a modified layout where the text area is
positioned and sized with ems, and the edges of the postcard and other
background image areas are also positioned with ems, so at least the
page will handle differing text sizes without falling to pieces.
cheers,
matt andrews.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
