Re: hwg-techniques-digest V1 #1172

At 08:51 AM 28/04/01 -0400, you wrote:
>Change your CSS. It's all wrong if you want it to work in Netscape 4.x.

What?!  The only thing wrong with his style sheet is that he uses ems for=20
everything.  The rest is fine if he takes into consideration that NN 4 will=
=20
not render it exactly as he expects.

>Put font-family last. Make sure you don't have spaces between the items=20
>(you need the commas, of course).

In fact he should use the short hand notation.  Spaces should indeed be=20
removed but I don't believe they hinder the rendering of the style  Short=20
hand is still the clearest way to define fonts and even NN 4 supports it:

font: normal 12px/1.5em Geneva,Arial,Helvetica,sans-serif;

In later style declarations he removed the spaces form "Times New Roman"=20
and "Goudy Old Style" instead of putting the font names in quotes.  That=20
should be changed.  He also lists "Verdana" as "Veranda" everywhere.  That=
=20
should be changed as well.  It's those kinds of errors that break the=20
styles, not the style properties he uses.

>  Take out margin, padding, etc. I saw a 'clear;' -- what is that? Get rid=
=20
> of it. Netscape doesn't support any of that, and it will ignore some=20
> things you want it to obey if you put them there.

Again... what?!  NN4 DOES support padding, margin and clear but render the=
=20
first two different that IE.  Why on earth would he want to remove those=20
just because NN 4 doesn't render them the same?  NN 4 usage is dwindling=20
all the time so I don't think it's a smart move to dumb down one's CSS just=
=20
to accommodate it.  Clear is a perfectly valid CSS property that plays the=
=20
same role as <.br clear=3D"...">.  I think even NN 4 supports it.  Just=20
because it's new to you doesn't meant he should remove it from his style=20
sheet either.

>If the style is the same as the base style defined either in the body or P=
=20
>tag, don't use it. You had a lot of those. Only define what CHANGES, not=20
>everything, when you define a subclass (p.something, td.something, etc.).=
=20
>If you want to have inheritance work, you only define what's changing to=20
>avoid confusion.

Well, if he needs to support NN4 then adding redundant style declarations=20
is a good idea as this browser's support for inheritance is abysmal at=20
best.  I agree that specifying only what changes is better though and makes=
=20
for easier to read and shorter style sheets.

>Use px rather than em, or use percentage. Pixels will stay a fixed size,=20
>percentage will be keyed off the default font size. Both work very well in=
=20
>Netscape. Don't use line height -- it doesn't work right. You WILL have=20
>space after P, H1/2/3/4/5, DIV, forms, and any other block element.

Not necessarily...   DIV for example introduces a line break after the=20
closing DIV tag but no blank line.  The blank line can also be removed for=
=20
the other block level elements using margin: 0px;  Also, why on earth=20
shouldn't he use line-height?  When you know the Netscape bug with it and=20
how to avoid it there's no reason not to use line-height.  As long as there=
=20
are no images and text within the same block element to which line height=20
is applied all is fine.  That's why I apply line-height only to P tags and=
=20
make sure there's no images in that paragraph but I use it all the=20
time.  The default leading in browser is not large enough and should always=
=20
be adjusted.

>  That's part of the standards. Netscape doesn't let you get rid of the=20
> space, so live with it.

It's part of what standard exactly? Can you be specific?  Just because NN 4=
=20
doesn't let you get rid of space doesn't mean that it's a standard.  As far=
=20
as I know, the specs are not very specific regarding blank spaces and=20
adding blank lines before and after those tags is more of a tradition kind=
=20
of thing than anything else.  In any case, CSS lets you control it except=20
of course in NN 4 but one should be prepared to see differences in how=20
different browsers render pages.

>You CAN force breaks, and use SPAN to define the text, which will give you=
=20
>more control over the amount of spacing between the lines of type.

Line-height is still much better and far more precise, and NN 4 does render=
=20
it fine when you take steps to avoid its bug with line-height and=20
images.  Using spans all over is, to me, not much better than cluttering up=
=20
the page with countless font tags.  a simple class for every paragraph will=
=20
do the job much more efficiently.

>If the positioning is totally crucial (and on the page you gave, it's=20
>really not), you can put everything in DIV tags and give them a position.=
=20
>Lists are problematic... Netscape applies the style to the BULLET, IE=20
>applies it to the TEXT. I tend to not define lists at all, and use SPAN=20
>tags around the text to get that to look the same on both.
>
>You WON'T be able to use IE specific style, or CSS2 style definitions,=20
>which will make it look slightly different than it does now, but the=20
>change will be minimal.

I didn't see and CSS2 or IE specific style properties in his style sheet so=
=20
that is not a problem here.

>I looked at it in Netscape 4.75, it didn't look much different and the=20
>'space' caused no grief -- you're not trying to get images to line up, as=
=20
>in some complex tables I do (which very often use CSS -- I use CSS for=20
>almost everything now).

I didn't see any major difference either (I test in NN 4.76) and the errors=
=20
I pointed to him yesterday are still there this morning so when they are=20
fixed the rendering will improve.

>Remember, the average user doesn't look at pages in multiple browsers, so=
=20
>they don't even know it could look different.

Please don't make such wide generalizations.  I know many "average" users=20
who try out different browsers before settling on one and they are=20
perfectly aware that pages do not look the same in all browsers..

>As for the width.. set your tables as a FIXED (pixel) size, not a=20
>percentage, use CSS to set the font sizes, and it will look almost EXACTLY=
=20
>the same in both browsers.

I much prefer liquid layouts myself.  Pages that adapt to different=20
resolutions are a bit harder to build properly but they look far better at=
=20
different resolutions.  With fixed layouts you have to make assumptions=20
about an "average" screen width for the site's audience.  Such assumptions=
=20
can turn out wrong in so many situations that I prefer to simply avoid side=
=20
scrolling at a "base" resolution and make the layout liquid.  I often keep=
=20
some elements fixed though.

St=E9phane Bergeron

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA