H1 { color: #FFFFFF} not working in FF 1.0 [CSS]

Prev: What are your users using? IE vs FF and everyone else
Next: What are your users using? IE vs FF and everyone else

From: Jason Carlton on 9 Jan 2008 05:17

I'm using an external stylesheet, and it validates fine (well, with
the exception of one thing that I already knew about... more later).
But changing the color of the H1 and H2 tags works fine in IE, Opera,
and Safari, but not in FF. I've specifically checked with FF 1.0.

This is the code:

H1 { font-family: "Times New Roman"; color: #FFFFFF; font-size: 10pt;
font-weight: bold; margin: 0px; display: inline }
H2 { font-family: "Times New Roman"; color: #F7D608; font-size: 10pt;
font-weight: bold; margin: 0px; display: inline }

a.logo { text-decoration: none }
a.logo:hover { text-decoration: none }

And here is the HTML:

<script language="Javascript">

</script>
<noscript><a href="$home/" class="logo"></noscript>
<H2>go</H2><H1>$default</H1>
</a>

(Note that, yes, the word "go" and the result of "$default" are
supposed to be beside of one another)

Is this a bug with FF 1.0, or is there something else that I should do
to correct this problem? About 5% of my traffic is using FF1.0, which
accounts for about 2500 unique visitors, so I'd like to fix this if at
all possible.

TIA,

Jason

PS, here's the part that doesn't validate. I use it to make a table
translucent in IE, but it doesn't matter if it doesn't work in other
browsers:

table.showCal {
background-color: #FFF;
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity: 0.95;
}

From: Gregor Kofler on 9 Jan 2008 10:58

Jason Carlton meinte:
> I'm using an external stylesheet, and it validates fine (well, with
> the exception of one thing that I already knew about... more later).
> But changing the color of the H1 and H2 tags works fine in IE, Opera,
> and Safari, but not in FF. I've specifically checked with FF 1.0.

What about the other properties? Only the color doesn't work?

> This is the code:
>
> H1 { font-family: "Times New Roman"; color: #FFFFFF; font-size: 10pt;
> font-weight: bold; margin: 0px; display: inline }

Times only? What about Linux users? Font-size in pt - what's that
supposed to be?

> H2 { font-family: "Times New Roman"; color: #F7D608; font-size: 10pt;
> font-weight: bold; margin: 0px; display: inline }
>
> a.logo { text-decoration: none }
> a.logo:hover { text-decoration: none }
>
>
> And here is the HTML:
> <script language="Javascript">

<script type="text/javascript">

> 

Not needed. At least make it //-->.

> </script>
> <noscript><a href="$home/" class="logo"></noscript>
> <H2>go</H2><H1>$default</H1>
> </a>
>
> (Note that, yes, the word "go" and the result of "$default" are
> supposed to be beside of one another)

Do you have sample page?

BTW: I suppose it would be *much* smarter to have something like

<h2>go <span class="h1color">$default</span></h2>

Gregor

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur f�r den alpinen Raum

From: Jason Carlton on 9 Jan 2008 17:37

> What about the other properties? Only the color doesn't work?

Exactly, the other properties work fine. FWIW, the color shows up as
blue; the default "link" color.

> Times only? What about Linux users? Font-size in pt - what's that
> supposed to be?

I actually pasted the simplified CSS just for your own legibility. I
had been playing with it a lot to make it work, with no success, and
the code pasted here was the easiest to read. I didn't think you would
care to read 3 lines if half of it was just font families :-)

Also, the original is font-size: 60px, but I had tried using pt for
kicks.

> Do you have sample page?

Check out http://www.gowilkes.com. The problem here is specifically
the logo in the top left corner.

> BTW: I suppose it would be *much* smarter to have something like
>
> <h2>go <span class="h1color">$default</span></h2>

I originally broke it down into <H1> and <H2> just for the sake of
search engines. I'm not sure how effective that is now, but it had an
impact when I did it 3 or 4 years ago!

Thanks, Gregor,

Jason

From: Ben Bacarisse on 9 Jan 2008 19:00

[Note: you are losing attribution lines (the "so and so wrote" bits).
Try to keep them in, please. I've try to do some repair on them.]

Jason Carlton <jwcarlton(a)gmail.com> writes:
> Gregor Kofler wrote:
<snip>
>> Do you have sample page?
>
> Check out http://www.gowilkes.com. The problem here is specifically
> the logo in the top left corner.

Ah, so much easier when we have a page to view...

It is a link, so it gets styled as one and is thus blue. You have:

a.logo {
text-decoration: none;
}

so this seems a good place to set the colour.

--
Ben.

From: Gregor Kofler on 9 Jan 2008 18:57

Jason Carlton meinte:
>> What about the other properties? Only the color doesn't work?
>
> Exactly, the other properties work fine. FWIW, the color shows up as
> blue; the default "link" color.

> Check out http://www.gowilkes.com. The problem here is specifically
> the logo in the top left corner.

Ok. The <a> overrides the <h?>. In FF2 as well. Get yourself the Firebug
extension and all your worries are gone. You can check with a simple
mouseclick how CSS rules are interpreted (and which ones are abandoned),
and you can just as easily turn single rules on and off.

It took me precisely 15 seconds to figure out, that your a.logo needs a
"color:#fff;"

HTH, Gregor

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur f�r den alpinen Raum

|
Pages: 1
Prev: What are your users using? IE vs FF and everyone else
Next: What are your users using? IE vs FF and everyone else