Mac and CSS Line Spacing Issues

[PinkBishop]

I have included my .css script below.

This is my first attempt at CSS.

The pages look fine through they eyes of PC browsers and NS on the
Mac.

On IE and Safari for Mac all hell breaks loose.

I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.

Can anybody see a problem with the below script that could be causing
this?

I have removed the reference to the .css and the problem goes away,
but I then do not have styles included.

Thanks,

Tom


..bodytext {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #000000;
background: #98C3C0;
}
..subnavLeft {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background: #1F5329;
}

..subnavBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #1F5329;
}

..cabinRatesTable {
font-family: Verdana, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
font-weight: bold;
color: #000000;
}

..cabinMenu {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
background-color: #84C1DF;
border: 1px #000000 solid;
}

a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}

a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #A386B9;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #E29F1C;
}
..bodytextbold {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: bold;
color: #333333;
}

..h1 { font-family: Verdana, Helvetica, sans-serif;
font-size: 14pt;
color: #4F8884;
font-weight:bold;
}

..h2 { font-family: Verdana, Helvetica, sans-serif;
font-size: 12pt;
color: #1F5329;
font-weight:bold;
}

..h3 { font-family: Verdana, Helvetica, sans-serif;
font-size: 11pt;
color: #1F5329;
font-weight:bold;
}

[Neal]

On Fri, 05 Mar 2004 00:22:08 -0500, PinkBishop <pi********@hotmail.com>
wrote:

I have included my .css script below.

This is my first attempt at CSS.

The pages look fine through they eyes of PC browsers and NS on the
Mac.

On IE and Safari for Mac all hell breaks loose.

I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.
Let's see if we can find it, and what else we find along the way, shall we?
.bodytext {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #000000;
background: #98C3C0;
}
1) If you size Verdana to look good, it being replaced by Helvetica will
result in tiny text. Not the best choice. Arial and Helvetica match up
pretty well. I'd advise NOT using Verdana unless it's going to be at large
sizes anyway, where replacement won't result in inability to read the text.

2) px is an absolute measurement. If my monitor is set for 600X400, then I
reset it for 1024x768, px-sized trext will become half the size. Best
choice is to use % based on the user's preferred default - and going lower
than 90% is risking illegibility. Same with line height. And that's
probably the source of your immediate problem - pixels vary in size from
monitor to monitor. Really, totally ABANDON the notion that anything but %
and maybe ems are useful for sizing fonts, and do murder the person who
told you otherwise.

3) Good for you, setting color and background-color simultaneously.
.subnavLeft {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background: #1F5329;
}
1) Verdana issue again.

2) px issue again.

3) Good for you again.
.subnavBottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
color: #1F5329;
}
Same, same, same.
.cabinRatesTable {
font-family: Verdana, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
font-weight: bold;
color: #000000;
}
Specify that background-color just in case.
.cabinMenu {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
background-color: #84C1DF;
border: 1px #000000 solid;
} a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}

a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #A386B9;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #E29F1C;
}
If the links are only clear when hovered, how will anyone know to hover?
The color? What if it's a b/w monitor or a colorblind person? Keep the
underlines or at least do something to cue the user in besidfes color.
.bodytextbold {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: bold;
color: #333333;
}
You know what I'm going to say...
.h1 { font-family: Verdana, Helvetica, sans-serif;
font-size: 14pt;
color: #4F8884;
font-weight:bold;
}
You know, I should tell you, if you set the font-family for body, all the
elements will inherit it. No need to repeat this like you have. It's
redundant.
.h2 { font-family: Verdana, Helvetica, sans-serif;
font-size: 12pt;
color: #1F5329;
font-weight:bold;
}

.h3 { font-family: Verdana, Helvetica, sans-serif;
font-size: 11pt;
color: #1F5329;
font-weight:bold;
}

Same same same.

Whenever you state color, state background color - you never know when a
user style sheet will have something which will too closely match the
color in the background.

Just a few basic tweaks, and this'll pass muster.

[Andrew Graham]

PinkBishop wrote:

The pages look fine through they eyes of PC browsers and NS on the
Mac.

On IE and Safari for Mac all hell breaks loose.

I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.

Can anybody see a problem with the below script that could be causing
this?

.bodytext {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 20 px;

Get rid of the space between "20" and "px". A validator, or even a
syntax-highlighting editor should pick up that error.

Andrew Graham

[Alan J. Flavell]

On Fri, 5 Mar 2004, Andrew Graham wrote:

PinkBishop wrote:

Can anybody see a problem with the below script that could be causing
this?

.bodytext {
font-family: Verdana, Helvetica, sans-serif;
ahem, someone seems to have reading difficulties... please try to
get tuned to the group's wavelength before trying to take advantage of
its assistance, OK? As the traditional usenauts used to say, "lurk
before you leap".
font-size: 13px;
font-style: normal;
font-weight: normal;
line-height: 20 px;
Get rid of the space between "20" and "px".

Sure; but that's not all that's wrong with the above. Consider a user
who, for whatever reason, has told their browser to set a min font
size of say 28px. That line height isn't going to be very useful.

That would be fine if designing for the author's own printout,
but in a WWW context it needs a significantly more flexible approach.
I'd suggest working mostly in em units (and/or percentage).
A validator, or even a
syntax-highlighting editor should pick up that error.

Certainly the questioner should use appropriate software, such as a
CSS syntax checker, before appealing to the liveware on usenet. But
syntactical correctness by itself is not enough.

all the best

[Jim Royal]

In article <8j********************************@4ax.com>, PinkBishop
<pi********@hotmail.com> wrote:

The pages look fine through they eyes of PC browsers and NS on the
Mac.

On IE and Safari for Mac all hell breaks loose.

I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.

The problem is indeed the space between the 20 and the px. Fix that,
and all is better.

A tip to save you some work:

I notice you are using class names such as .bodytext .h1 and .h2 and
..h3. This requires markup such as:

<p class="bodytext">
<p class="h1">
<p class="h2">
<p class="h3">

Why not simple style the HTML elements directly? You can then replace
the above markup with:

<p>
<h1>
<h2>
<h3>

--
Jim Royal
"Understanding is a three-edged sword"
http://JimRoyal.com

[Karl Smith]

PinkBishop <pi********@hotmail.com> wrote:

I have included my .css script below.
<grr>Script!? Did you say, "Script"!?</grr>
I am getting huge amounts of white space between lines probably
comparable to about 5-10 line breaks.

Can anybody see a problem with the below script that could be causing
this?

.bodytext {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
line-height: 20 px;

Line height is just a number, it doesn't need units. 13/20 would be
about:

line-height: 1.5;

Now you can do it the hard way, and include units, like this:

line-height: 20px;

But definitely *not* like this:

line-height: 20 px;

And don't believe any CIWAHian trolling about Verdana (unless you want
to). But, do believe anyone who says not to set font-size in pixels.
And do send hate mail to Jonathan Frakes.

--
Karl Smith.

[Alan J. Flavell]

On Sat, 5 Mar 2004, Karl Smith wrote:

And don't believe any CIWAHian trolling about Verdana

Feel free to present the facts. If you don't, people might suspect
you had nothing better than resorting to name-calling.

[Nick Theodorakis]

On Sat, 6 Mar 2004 01:00:24 +0000, "Alan J. Flavell"
<fl*****@ph.gla.ac.uk> wrote:

On Sat, 5 Mar 2004, Karl Smith wrote:

And don't believe any CIWAHian trolling about Verdana

Feel free to present the facts. If you don't, people might suspect
you had nothing better than resorting to name-calling.

There seems to me to be at least two issues.

One the one hand, there is the unfortunately too-common practice of
suggesting a small font size for main text, then "rescuing" its
legibility by also suggesting Verdana, in which case the text may be
unreadable if Verdana is not available to the user.

On the other hand, there is also the belief that Verdana is too "big
looking" or otherwise unappealing at 1em. Although I happen to think
it may look a little odd in such cases (although I wouldn't go so far
to say it's ugly), surely there can be room here to account for
personal taste?

On the gripping hand, at larger sizes (such as the typical browser
defaults for <h2>), I actually think that Verdana looks pretty decent.
So perhaps a case can me made for suggesting Verdana when the text is
likely to be large (e.g., headings) or small (<sup>?) but not
in-between.

I think there also might be a case for not suggesting Helvetica, at
least for a first choice. Although it is a beautiful font when done
properly (if you like sans-serif fonts), some common browers (let the
reader understand!) make an absolute mess of it. I also notice that my
copy of Mozilla (1.4 on Win98) doesn't even try to render it; it
sneakily slips Arial in its place, even though I have Helvetica
installed.

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

[Karl Smith]

ni**************@hotmail.com (Nick Theodorakis) wrote:

One the one hand, there is the unfortunately too-common practice of
suggesting a small font size for main text, then "rescuing" its
legibility by also suggesting Verdana, in which case the text may be
unreadable if Verdana is not available to the user.
U-huh. In which case the blame should be assigned correctly. To an
author's pathological desire to use the smallest text possible, not to
any alleged shortcomings of the Verdana font.

On the other hand, there is also the belief that Verdana is too "big
looking" or otherwise unappealing at 1em. Although I happen to think
it may look a little odd in such cases (although I wouldn't go so far
to say it's ugly), surely there can be room here to account for
personal taste?
U-huh. But there is no room for personal taste in the CIWAHian world.
Everyone must conform, in every way, every time.

On the gripping hand, at larger sizes (such as the typical browser
defaults for <h2>), I actually think that Verdana looks pretty decent.
So perhaps a case can me made for suggesting Verdana when the text is
likely to be large (e.g., headings) or small (<sup>?) but not
in-between.
Something both I and Lauri R. have previously said. I can't speak for
Lauri, but I still like Verdana for headings.

I think there also might be a case for not suggesting Helvetica, at
least for a first choice. Although it is a beautiful font when done
properly (if you like sans-serif fonts), some common browers (let the
reader understand!) make an absolute mess of it. I also notice that my
copy of Mozilla (1.4 on Win98) doesn't even try to render it; it
sneakily slips Arial in its place, even though I have Helvetica
installed.

[How do you tell the difference between real Helvetica and Arial?]

The real issue is what does the author hope to achieve in setting a
typeface at all? Is there actually any goal in mind, or is it merely
habit?

I think the constant stream of warnings about Verdana are just a
habit. What's its crime - being widely spaced? So what? Web pages
aren't books, we're constantly being hounded - put aside your
prejudices. If you print a book in a wide font it will literally cost
you more because you'll get fewer words per page and need more pages.
Web pages are as long as they are. The cost doesn't change with
typographical choices.

Now back to authors - if the desire is to use small sizes on screen
(why!?), specify high ex-height fonts. Something like:

"Georgia, Verdana, Tahoma"

"What? One is seriffed and others sans-serif!" says Mr Newbie.

So what? Eh, so what? OTOH, If the desire is merely to give a list of
commonly installed sans-serif fonts, Verdana is possibly
inappropriate. It seems to stand out as different in the commonly seen
"Verdana, Arial, Helvetica, sans-serif". But then if you're just
listing commonly installed sans-serif fonts, for no particular
purpose, you're definitely on Team Clueless.

--
Karl Smith.

[Nick Theodorakis]

On 6 Mar 2004 00:41:45 -0800, go************@kjsmith.com (Karl Smith)
wrote:

[...]

[How do you tell the difference between real Helvetica and Arial?]

See:

<http://www.ms-studio.com/articlesarialsid.html>

for example.
Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu