Firefox and Tim Murtaugh's Mo' Betta Rollovers

[gallery]

I read somewhere that you can get Tim Murtaugh's Mo' Betta Rollovers to work
in Firefox using just CSS (no javascript) .

Can someone tell me how to do it?

http://www.alistapart.com/articles/rollovers/

[Jan Roland Eriksson]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

On Fri, 11 Feb 2005 17:20:31 -0500, "gallery" <m.cannon@comca st.net>
wrote:
[color=blue]
>I read somewhere[/color]

Well, an indication of a true source might raise your credibility.
[color=blue]
>that you can get Tim Murtaugh's Mo' Betta Rollovers to work
>in Firefox using just CSS (no javascript).[/color]

And who the hell is Tim...whatever.
Don't jump into an NG thinking that all the "buzzwords du jour" is
automatically known to all...
[color=blue]
>Can someone tell me how to do it?[/color]

No, not me, because I don't want to. You may want to reformulate your
question and find your self totally surprised from how much info I might
be able to give you for free.
[color=blue]
>http://www.alistapart.com/articles/rollovers/[/color]

And the appearance of that link in your post looks like you are
answering your own question, what gives?

Mind you, most "tutorials" out there are either true David Siegel's or
David Siegel's down on his knees. Just a bar few of them are correctly
correct at the end.

--
Rex

[Lachlan Hunt]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

gallery wrote:[color=blue]
> I read somewhere that you can get Tim Murtaugh's Mo' Betta Rollovers to work
> in Firefox using just CSS (no javascript) .
>
> Can someone tell me how to do it?
>
> http://www.alistapart.com/articles/rollovers/[/color]

The first example is pure CSS without JS and it works just fine in Firefox.

--
Lachlan Hunt

http://lachy.id.au/

http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[gallery]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers


"Lachlan Hunt" <spam.my.gspot@ gmail.com> wrote in message
news:420d80d7$0 $14940$5a62ac22 @per-qv1-newsreader-01.iinet.net.au ...[color=blue]
> gallery wrote:[color=green]
> > I read somewhere that you can get Tim Murtaugh's Mo' Betta Rollovers to[/color][/color]
work[color=blue][color=green]
> > in Firefox using just CSS (no javascript) .
> >
> > Can someone tell me how to do it?
> >
> > http://www.alistapart.com/articles/rollovers/[/color]
>
> The first example is pure CSS without JS and it works just fine in[/color]
Firefox.[color=blue]
>
> --[/color]

Lachlan, only the bottom part of each button has the proper color showing in
Firefox. Whereas in IE6+ the background color displays correctly. Several
months ago I read a fix for this, have done several searches today trying to
find it, but no luck.

I thought someone else might have run across it as well.

[Lachlan Hunt]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

gallery wrote:[color=blue]
> "Lachlan Hunt" <spam.my.gspot@ gmail.com> wrote in message
> news:420d80d7$0 $14940$5a62ac22 @per-qv1-newsreader-01.iinet.net.au ...[color=green]
>>
>>The first example is pure CSS without JS and it works just fine in[/color]
>
> Lachlan, only the bottom part of each button has the proper color showing in
> Firefox. Whereas in IE6+ the background color displays correctly.[/color]

I hadn't realised the intended behaviour was that exhibited by IE. In
this case, both Firefox 1.0 and Opera 7.54 render the example
identically and I dare say (though I haven't double checked the with
spec) that is correct for that CSS, and IEs rendering is incorrect, even
though it is desired. Using the following CSS instead solves the
problem, but next time try asking stylesheet questions in
c.i.w.a.stylesh eets, this one is for HTML.

a.ala img {background: #fff;}
a.ala:hover, a.ala img:hover {background: #fcc;}

:hover is used for both a.ala and the img because IE only supports it
for links and it seems to give the desired behaviour anyway. For
conformant UAs, only the "a.ala img:hover" selector is required.

--
Lachlan Hunt

http://lachy.id.au/

http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[Gus Richter]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Lachlan Hunt wrote:[color=blue]
> gallery wrote:
>[color=green]
>> "Lachlan Hunt" <spam.my.gspot@ gmail.com> wrote in message
>> news:420d80d7$0 $14940$5a62ac22 @per-qv1-newsreader-01.iinet.net.au ...
>>[color=darkred]
>>>
>>> The first example is pure CSS without JS and it works just fine in[/color]
>>
>>
>> Lachlan, only the bottom part of each button has the proper color
>> showing in
>> Firefox. Whereas in IE6+ the background color displays correctly.[/color]
>
>
> I hadn't realised the intended behaviour was that exhibited by IE. In
> this case, both Firefox 1.0 and Opera 7.54 render the example
> identically and I dare say (though I haven't double checked the with
> spec) that is correct for that CSS, and IEs rendering is incorrect, even
> though it is desired. Using the following CSS instead solves the
> problem, but next time try asking stylesheet questions in
> c.i.w.a.stylesh eets, this one is for HTML.
>
> a.ala img {background: #fff;}
> a.ala:hover, a.ala img:hover {background: #fcc;}
>
> :hover is used for both a.ala and the img because IE only supports it
> for links and it seems to give the desired behaviour anyway. For
> conformant UAs, only the "a.ala img:hover" selector is required.[/color]

That does not correct the half grayed area problem.
This corrects both problems:
a.ala {background: #fff; font-size:20px;}
a.ala:hover {background: #fcc;}

And changing the other line to:
img.ala {background: transparent; display: inline;}
will fix the remaining problem for FF.

The page is outdated. As you said, Opera now behaves the same as FF and
contradicts the page. It also refers to NS 6 which is very old and who
knows what problems it had in its day. The page was written for IE
basically.

--
Gus

[gallery]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Thanks guys ... you've fixed my problem. Very much appreciated!

AListApart - a terrific source - ought to go in and update that article.
It's a nifty way to handle rollovers.

http://www.alistapart.com/articles/rollovers/

"Gus Richter" <gusrichter@net scape.net> wrote in message
news:cPmdnSsY6Z U1b5DfRVn-sw@golden.net.. .[color=blue]
> Lachlan Hunt wrote:[color=green]
> > gallery wrote:
> >[color=darkred]
> >> "Lachlan Hunt" <spam.my.gspot@ gmail.com> wrote in message
> >> news:420d80d7$0 $14940$5a62ac22 @per-qv1-newsreader-01.iinet.net.au ...
> >>
> >>>
> >>> The first example is pure CSS without JS and it works just fine in
> >>
> >>
> >> Lachlan, only the bottom part of each button has the proper color
> >> showing in
> >> Firefox. Whereas in IE6+ the background color displays correctly.[/color]
> >
> >
> > I hadn't realised the intended behaviour was that exhibited by IE. In
> > this case, both Firefox 1.0 and Opera 7.54 render the example
> > identically and I dare say (though I haven't double checked the with
> > spec) that is correct for that CSS, and IEs rendering is incorrect, even
> > though it is desired. Using the following CSS instead solves the
> > problem, but next time try asking stylesheet questions in
> > c.i.w.a.stylesh eets, this one is for HTML.
> >
> > a.ala img {background: #fff;}
> > a.ala:hover, a.ala img:hover {background: #fcc;}
> >
> > :hover is used for both a.ala and the img because IE only supports it
> > for links and it seems to give the desired behaviour anyway. For
> > conformant UAs, only the "a.ala img:hover" selector is required.[/color]
>
> That does not correct the half grayed area problem.
> This corrects both problems:
> a.ala {background: #fff; font-size:20px;}
> a.ala:hover {background: #fcc;}
>
> And changing the other line to:
> img.ala {background: transparent; display: inline;}
> will fix the remaining problem for FF.
>
> The page is outdated. As you said, Opera now behaves the same as FF and
> contradicts the page. It also refers to NS 6 which is very old and who
> knows what problems it had in its day. The page was written for IE
> basically.
>
> --
> Gus[/color]

[Brian]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

gallery wrote:
[color=blue]
> http://www.alistapart.com/articles/rollovers/[/color]

Gawd, those people are clueless. Take a look at this .js, found via a
link from the rollovers article:

http://www.alistapart.com/d/domtricks2/domutils.txt

So, A List Apart is actually proposing that we sniff for ua strings to
determine how to manipulate the DOM? Gawd.

--
Brian

[gallery]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Yes ... some updating is definitely in order.


"Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
news:9jsPd.1974 2$uc.9028@trndd c08...[color=blue]
> gallery wrote:
>[color=green]
> > http://www.alistapart.com/articles/rollovers/[/color]
>
> Gawd, those people are clueless. Take a look at this .js, found via a
> link from the rollovers article:
>
> http://www.alistapart.com/d/domtricks2/domutils.txt
>
> So, A List Apart is actually proposing that we sniff for ua strings to
> determine how to manipulate the DOM? Gawd.
>
> --
> Brian[/color]

[Lachlan Hunt]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Brian wrote:[color=blue]
> Gawd, those people are clueless. Take a look at this .js, found via a
> link from the rollovers article:
>
> http://www.alistapart.com/d/domtricks2/domutils.txt
>
> So, A List Apart is actually proposing that we sniff for ua strings to
> determine how to manipulate the DOM? Gawd.[/color]

If you take a look at the date, 2000-07-21, that article was written
nearly 5 years ago back when that kind of stuff was typically accepted.
More recent articles on ALA have generally been much more focussed on
standards compliance and best practices. So please don't discredit the
whole of ALA based on a few bad articles in the past.

--
Lachlan Hunt

http://lachy.id.au/

http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[Brian]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Lachlan Hunt wrote:[color=blue]
> Brian wrote:
>[color=green]
>> Gawd, those people are clueless. Take a look at this .js, found via
>> a link from the rollovers article:
>>
>> http://www.alistapart.com/d/domtricks2/domutils.txt
>>
>> So, A List Apart is actually proposing that we sniff for ua strings
>> to determine how to manipulate the DOM? Gawd.[/color]
>
> If you take a look at the date, 2000-07-21, that article was written
> nearly 5 years ago back when that kind of stuff was typically
> accepted.[/color]

Only by the clueless. UA spoofing goes back more than 5 years.
[color=blue]
> More recent articles on ALA have generally been much more focussed on
> standards compliance and best practices. So please don't discredit
> the whole of ALA based on a few bad articles in the past.[/color]

The site is awash in bad practice. Just look at their css (widths in
pixels, font set to x-small, etc.). So bad that Steve Pugh put up a page
called "Taming a List Apart", with a slew of user css to fix their
broken visual design. The .js nonsense is just another symptom.

--
Brian

[Lauri Raittila]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

in comp.infosystem s.www.authoring.html, Lachlan Hunt wrote:[color=blue]
> Brian wrote:[color=green]
> > Gawd, those people are clueless. Take a look at this .js, found via a
> > link from the rollovers article:
> >
> > http://www.alistapart.com/d/domtricks2/domutils.txt
> >
> > So, A List Apart is actually proposing that we sniff for ua strings to
> > determine how to manipulate the DOM? Gawd.[/color]
>
> If you take a look at the date, 2000-07-21, that article was written
> nearly 5 years ago back when that kind of stuff was typically accepted.[/color]

Why is it not removed?
[color=blue]
> More recent articles on ALA have generally been much more focussed on
> standards compliance and best practices.[/color]

Yes, and often fine examples on how to not do things.
[color=blue]
> So please don't discredit the
> whole of ALA based on a few bad articles in the past.[/color]

Well, show us good article, telling something that is not hard to make
better.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Lachlan Hunt]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.html, Lachlan Hunt wrote:[color=green]
>>If you take a look at the date, 2000-07-21, that article was written
>>nearly 5 years ago back when that kind of stuff was typically accepted.[/color]
>
> Why is it not removed?[/color]

Because Cool URIs Don't Change! If articles were to be deleted just
because they are considered to contain somewhat bad advice, then the
historical record would be completely lost, and people following a link
to the article from another page (or from discussions like this!) would
just be presented with a 404 response, as happens so often. Although,
even if it were properly configured with a 410 instead, which is better
than the usual 404, that's still not completely useful. Before deleting
anything from the web, there should be a really good reason for doing so.
[color=blue][color=green]
>> More recent articles on ALA have generally been much more focussed on
>>standards compliance and best practices.[/color]
>
> Yes, and often fine examples on how to not do things.[/color]

I won't disagree with you there.
[color=blue][color=green]
>> So please don't discredit the
>>whole of ALA based on a few bad articles in the past.[/color]
>
> Well, show us good article, telling something that is not hard to make
> better.[/color]

http://alistapart.com/articles/pocket/

http://alistapart.com/articles/eatcake/

http://alistapart.com/articles/flashsatay/

--
Lachlan Hunt

http://lachy.id.au/

http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[gallery]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

AListApart is an influential site in the web development world that has been
created by a small number of very talented and very busy people. Read
Jeffrey Zeldman's "Designing with Web Standards" to see what kind of talent
exists behind this site.

The articles at ALA are dated and we are all intelligent enough to know that
the web is changing at lightening speed. Those dates are important.

It's a buyer beware situation. Something worked 3 years ago ... doesn't mean
it works now. We don't need to get all upset because there are out-of-date
ideas on the site.

Mo' Better Rollovers is such a nifty idea that even though ithe article is
dated, it is valuable .... it can be modified and brought up-to-date. I'm
grateful to Lachlan Hunt and Gus Richter for doing that for me. That menu
will be part of a major website that my firm is developing this year.

Again, thanks to both of you ....


"Lachlan Hunt" <spam.my.gspot@ gmail.com> wrote in message
news:420f4bba$0 $6492$5a62ac22@ per-qv1-newsreader-01.iinet.net.au ...[color=blue]
> Lauri Raittila wrote:[color=green]
> > in comp.infosystem s.www.authoring.html, Lachlan Hunt wrote:[color=darkred]
> >>If you take a look at the date, 2000-07-21, that article was written
> >>nearly 5 years ago back when that kind of stuff was typically accepted.[/color]
> >
> > Why is it not removed?[/color]
>
> Because Cool URIs Don't Change! If articles were to be deleted just
> because they are considered to contain somewhat bad advice, then the
> historical record would be completely lost, and people following a link
> to the article from another page (or from discussions like this!) would
> just be presented with a 404 response, as happens so often. Although,
> even if it were properly configured with a 410 instead, which is better
> than the usual 404, that's still not completely useful. Before deleting
> anything from the web, there should be a really good reason for doing so.
>[color=green][color=darkred]
> >> More recent articles on ALA have generally been much more focussed on
> >>standards compliance and best practices.[/color]
> >
> > Yes, and often fine examples on how to not do things.[/color]
>
> I won't disagree with you there.
>[color=green][color=darkred]
> >> So please don't discredit the
> >>whole of ALA based on a few bad articles in the past.[/color]
> >
> > Well, show us good article, telling something that is not hard to make
> > better.[/color]
>
> http://alistapart.com/articles/pocket/
> http://alistapart.com/articles/eatcake/
> http://alistapart.com/articles/flashsatay/
>
> --
> Lachlan Hunt
> http://lachy.id.au/
> http://GetFirefox.com/ Rediscover the Web
> http://SpreadFirefox.com/ Igniting the Web[/color]

[Alan J. Flavell]

Re: Firefox and Tim Murtaugh's Mo' Betta Rollovers

On Sun, 13 Feb 2005, gallery wrote:
[color=blue]
> AListApart is an influential site in the web development world that
> has been created by a small number of very talented and very busy
> people. Read Jeffrey Zeldman's "Designing with Web Standards" to see
> what kind of talent exists behind this site.
>
> The articles at ALA are dated and we are all intelligent enough to
> know that the web is changing at lightening speed. Those dates are
> important.
>
> It's a buyer beware situation.[/color]

I don't disagree with any of that...
[color=blue]
> Something worked 3 years ago ...
> doesn't mean it works now.[/color]

Then they're doing it wrong. Something that worked /properly/ 3 years
ago still works reasonably well today: there are almost certainly
better ways of doing it today, and I wouldn't advise anyone to
implement 3-year-old workarounds in their new designs today, but
there should normally no cause to go re-implementing old web content
just because some browser bugs have been fixed, or some better
techniques have become feasible. Unless you really want to.

In fact I'd rather leave my old HTML2.0 content (which can be browsed
at least as well today as it could be back then) unmodified.
[color=blue]
> We don't need to get all upset because there are out-of-date
> ideas on the site.[/color]

No, /my/ concern about them is that they presented techniques that
would better be rated as experimental or bleeding-edge, as if they
were fit to be used in production web pages. Some of the techniques
could even be categorised as dependent on browser bugs (and thus
risking falling flat when those bugs get fixed).

Thus tempting web page authors who hadn't applied the appropriate
degree of scepticism, into using techniques which would need long-term
maintenance, rather than ones that were resilient against future
developments. "Buyer beware", indeed.

best regards

[TOFU painlessly destroyed... You might want to consider adopting
the long-established usenet followup style. Makes discussion go much
more smoothly.]