Why does stylesheet directive not work with FireFox?

[deko]

Firefox will not take the following "font-weight:bold" directive in my
stylesheet. Works fine in IE.

#rightMenuText h5 {
font-weight:bold;
padding-bottom:0px;
padding-top: 10px;
margin-bottom:0px;
}

If you view http://www.clearpointsystems.com in both FF and IE you can see
difference. I've been trying different things, but can't seem to get the
bold font. Is there something wrong with my code? Or is this another quirk
with FF vs. IE?

Here's the (abbreviated) code:

<div id="rightMenu" >
<div id="rightMenuBo dy">
<div id="rightMenuTe xt">
<p>[image]</p>
<h5>Welcome to CSI</h5>
[text]
<h5>Big News!</h5>
[text]
<h5>Security Matters</h5>
[text]
<h5>[more headings]</h5>
[more text]

[deko]

> Firefox will not take the following "font-weight:bold" directive in my

stylesheet. Works fine in IE.

I figured it out - I was redefining the <h5> tag in the stylesheet. IE
still rendered it as an h5, but not FF. So it appeared "bold" in IE, but
only as regular text in FF. The different browsers were rendering the exact
same code differently - ah yes, the joy of web programming.

[Michael Rozdoba]

deko wrote:

Firefox will not take the following "font-weight:bold" directive in my
stylesheet. Works fine in IE.
It renders it here - XP with FF 1.0.

However it does still look very different to IE's version. Both are
bold, but in FF the heading text is approximately 60% of the size of the
text it heads, hence the bold effect is visually almost lost.

There's something daft going on with font sizes, nothing more.

TBH I'd expect FF's behaviour. The div containing the heading has a
font-size of 10px, so h5 would default to about 6px & I didn't notice
you explicitly setting a font size elsewhere that would affect h5.

That IE does its own thing doesn't surprise me - it's clearly decided
your decision is a <polite>silly </polite> one & it knows better.

More oddly, Opera 8 does something similar to IE - though if I use the
web developer toolbar (http://nontroppo.org/wiki/WebDevToolbar) to tell
me the computed styles for h5 it reports 6px which certainly isn't how
it renders it. I'd guess they don't necessarily reflect the final
decisions used in rendering :-/

#rightMenuText h5 {
font-weight:bold;
padding-bottom:0px;
padding-top: 10px;
margin-bottom:0px;
}

If you view http://www.clearpointsystems.com in both FF and IE you can see
difference. I've been trying different things, but can't seem to get the
bold font. Is there something wrong with my code? Or is this another quirk
with FF vs. IE?

Here's the (abbreviated) code:

<div id="rightMenu" >
<div id="rightMenuBo dy">
<div id="rightMenuTe xt">
<p>[image]</p>
<h5>Welcome to CSI</h5>
[text]
<h5>Big News!</h5>
[text]
<h5>Security Matters</h5>
[text]
<h5>[more headings]</h5>
[more text]

In any case, why are you using a level five heading at that point? What
happened to h1 to h4? I'd expect these to be nested before a recourse to h5.

Oh, someone else will probably add font sizes in px are bad(tm) - better
to use ems or percentages aiui.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Alan J. Flavell]

On Thu, 17 Mar 2005, deko wrote:

Firefox will not take the following "font-weight:bold" directive in my
stylesheet. Works fine in IE.

#rightMenuText h5 {
font-weight:bold;
padding-bottom:0px;
padding-top: 10px;
margin-bottom:0px;
}

If you view http://www.clearpointsystems.com in both FF and IE you
can see difference.
#rightMenuText has idiotically specified a font size of 10px, and
it seems to me that Moz has done just what was asked.

If I look at 10px Arial in normal and bold weight in Mozilla or FF,
they look almost same, because they're too tiny to be able to discern
much difference. They don't need to be embedded deep in some complex
structure of divs to see this.

If I would set them a sensible size (I used 1em in my comparison
test), there's a clear difference between normal and bold.
with FF vs. IE?

Can you explain IE's logic in determining the size of this text?
Maybe I'm missing something.

[deko]

> It renders it here - XP with FF 1.0.

I've been making various changes since my post - that may account for the
varying results at this point.

That IE does its own thing doesn't surprise me - it's clearly decided
your decision is a <polite>silly </polite> one & it knows better.
I'm sure my code is not the best - I just wish I got consistent results.
More oddly, Opera 8 does something similar to IE - though if I use the
web developer toolbar (http://nontroppo.org/wiki/WebDevToolbar) to tell
me the computed styles for h5 it reports 6px which certainly isn't how
it renders it. I'd guess they don't necessarily reflect the final
decisions used in rendering :-/ In any case, why are you using a level five heading at that point? What
happened to h1 to h4? I'd expect these to be nested before a recourse to h5.

I thought I might use those other <h> tags somewhere else, so I picked one
that I thought I would not use. Does it matter what it is if I redefine it?
Oh, someone else will probably add font sizes in px are bad(tm) - better
to use ems or percentages aiui.

I thought it was better to us px. That's news to me if it's bad(tm). Why?

Thanks for the reply!

[deko]

> Can you explain IE's logic in determining the size of this text?

Logic? I'd say it a "feature"

There's another feature of IE I'd like to figure out. I generate that left
nav bar with the below PHP code. The problem is the vertical spacing of the
links is different in IE than it is in FF. Is there a way to get consistent
spacing? Why are the <p> tags rendered differently by IE than they are in
FF?

<?php
function linkcolor($arg)
{
$nav = trim($_GET[nav]);
if ( $arg == $nav )
{ return "grnlink";}
else
{ return "blulink";}
}
echo "

<p><span class=".linkcol or('Home Page').">
<a href='index.php ?nav=Home Page'>Home Page</a>
</span></p>

<p><span class=".linkcol or('Contact')." >
<a href='contact.p hp?nav=Contact' >Contact</a>
</span></p>

<p><span class=".linkcol or('Services'). ">
<a href='services. php?nav=Service s'>Professional Services
</a></span></p>

";
?>

[deko]

> I thought it was better to us px. That's news to me if it's bad(tm).
Why?

This explains it well -
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

But with all the various "features" in all the various browsers, authors
don't want the presentation of their pages getting screwed up. Thus px is
more reliable for consistent presentation. Complaints should be sent to the
browser makers. When my code looks the same in all the different browsers,
I will stop using px. And as far as I can see (pun intended) the only
reason *not* to use px is to allow people to change the font size. Well, I
try to use fonts that are large enough for everyone to read anyway. And, if
necessary, one can always adjust his monitor resolution.

[Darin McGrew]

deko <de**@hotmail.c om> wrote:

This explains it well -
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

But with all the various "features" in all the various browsers,
Like minimum font size? Or the ability to ignore document font sizes? Or
user style sheets that enforce min-width or max-width? Or Opera's new
Fit-to-Window feature?
authors don't want the presentation of their pages getting screwed up.
Thus px is more reliable for consistent presentation. Complaints should
be sent to the browser makers. When my code looks the same in all the
different browsers, I will stop using px.
Your markup is never going to look the same in all the different browsers.
That's the reality of the WWW. Using px for font sizes isn't going to
change that; it just causes your page to break for some potential readers.
And if your layout relies on your px-based font sizes, then your page can
break in even more ways when they are ignored.

See also http://www.westciv.com/style_master/...oil/not_paper/
And as far as I can see (pun intended) the only reason *not* to use px is
to allow people to change the font size. Well, I try to use fonts that
are large enough for everyone to read anyway.

So how large is "large enough for everyone to read"?

I know people who can't read fonts that I find comfortable to read. And I
find it awkward and inconvenient to read the "large print" fonts that they
need. If you leave the font size alone (using 1em or 100% for normal text),
then we can all be happy. If you use px, then someone is guaranteed to be
inconvenienced.
--
Darin McGrew, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/

"I'd love to make time, if only I could find the recipe."

[David Dorward]

deko wrote:

There's another feature of IE I'd like to figure out. I generate that
left nav bar with the below PHP code. The problem is the vertical spacing
of the links is different in IE than it is in FF.
Browsers are different.

Different browsers have different defaults.

You are probably experiencing variations in margins and/or padding.
Is there a way to get consistent spacing?
Try specifying the above in your style sheet.

<?php
function linkcolor($arg)
{
$nav = trim($_GET[nav]);
if ( $arg == $nav )
{ return "grnlink";}
else
{ return "blulink";}
}

This code isn't very readable, it took me a while before I noticed that you
aren't prefixing your class names with full stops, but it was PHP syntax.

Try this:

?>
<p><span class="<?php echo linkcolor('Home Page') ?>">
<a href='index.php ?nav=Home Page'>Home Page</a>
</span></p>

<!-- more links -->
....
<?php

And I'd suggest you change your markup too. A list of links shouldn't really
be marked up as a series of paragraphs. Try using a list instead.

http://css.maxdesign.com.au/listamatic/

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Alan J. Flavell]

On Thu, 17 Mar 2005, deko wrote:

authors don't want the presentation of their pages getting screwed
up.
Then they'd do better to ask for what the reader needs, instead of
relying on the reader to override whenever the author's demands are
inappropriatate .
Thus px is more reliable for consistent presentation.
This is complete nonsense, I'm afraid. The only thing "consistent "
about authors who specify px font sizes for my 135dpi desktop display
is that I yell "aaargh microfonts" and either leave, or reach for the
override.

Even *if* browsers implemented the CSS px unit to specification (which
in practice they generally don't), it would still make no allowances
for individual needs. CSS px units, implemented to spec, might be
appropriate for a collective viewing situation (projector, for
example) where everyone is forced to view the display at the "same
size", but for personal viewing the only reliable unit is the reader's
chosen normal text size.
When my code looks the same in all the different browsers,
"Looks the same" on Lynx, mobile phone, theatre projector,
IBM HPR? You're missing the point of the WWW.
I will stop using px.

You *will* "stop using px" whenever I need to read your page, no
matter what you put into your stylesheet. The harder you try to do
the wrong thing, the greater the probability that the reader will have
to out-vote you. And on the WWW the reader always gets the last word.