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]

On Fri, 11 Feb 2005 17:20:31 -0500, "gallery" <m.******@comcast.net>
wrote:

I read somewhere
Well, an indication of a true source might raise your credibility.
that you can get Tim Murtaugh's Mo' Betta Rollovers to work
in Firefox using just CSS (no javascript).
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...
Can someone tell me how to do it?
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.
http://www.alistapart.com/articles/rollovers/

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]

gallery wrote:

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/

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]

"Lachlan Hunt" <sp***********@gmail.com> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...

gallery wrote:

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/
The first example is pure CSS without JS and it works just fine in

Firefox.
--

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]

gallery wrote:

"Lachlan Hunt" <sp***********@gmail.com> wrote in message
news:42***********************@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.

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.stylesheets, 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]

Lachlan Hunt wrote:

gallery wrote:

"Lachlan Hunt" <sp***********@gmail.com> wrote in message
news:42***********************@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.

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.stylesheets, 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.

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]

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" <gu********@netscape.net> wrote in message
news:cP********************@golden.net...

Lachlan Hunt wrote:

gallery wrote:

"Lachlan Hunt" <sp***********@gmail.com> wrote in message
news:42***********************@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.

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.stylesheets, 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.

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

[Brian]

gallery wrote:

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

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]

Yes ... some updating is definitely in order.
"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:9jsPd.19742$uc.9028@trnddc08...

gallery wrote:

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

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

[Lachlan Hunt]

Brian wrote:

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.

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]

Lachlan Hunt wrote:

Brian wrote:

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.
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.

Only by the clueless. UA spoofing goes back more than 5 years.
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.

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]

in comp.infosystems.www.authoring.html, Lachlan Hunt wrote:

Brian wrote:

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.
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.

Why is it not removed?
More recent articles on ALA have generally been much more focussed on
standards compliance and best practices.
Yes, and often fine examples on how to not do things.
So please don't discredit the
whole of ALA based on a few bad articles in the past.

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]

Lauri Raittila wrote:

in comp.infosystems.www.authoring.html, Lachlan Hunt wrote:

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.

Why is it not removed?

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.

More recent articles on ALA have generally been much more focussed on
standards compliance and best practices.

Yes, and often fine examples on how to not do things.

I won't disagree with you there.

So please don't discredit the
whole of ALA based on a few bad articles in the past.

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

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]

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" <sp***********@gmail.com> wrote in message
news:42**********************@per-qv1-newsreader-01.iinet.net.au...

Lauri Raittila wrote:

in comp.infosystems.www.authoring.html, Lachlan Hunt wrote:

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.

Why is it not removed?

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.

More recent articles on ALA have generally been much more focussed on
standards compliance and best practices.

Yes, and often fine examples on how to not do things.

I won't disagree with you there.

So please don't discredit the
whole of ALA based on a few bad articles in the past.

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

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

[Alan J. Flavell]

On Sun, 13 Feb 2005, gallery wrote:

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.
I don't disagree with any of that...
Something worked 3 years ago ...
doesn't mean it works now.
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.
We don't need to get all upset because there are out-of-date
ideas on the site.

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.]

[gallery]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi******************************@ppepc56.ph.g la.ac.uk...

On Sun, 13 Feb 2005, gallery wrote:

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.

I don't disagree with any of that...

Something worked 3 years ago ...
doesn't mean it works now.

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.

We don't need to get all upset because there are out-of-date
ideas on the site.

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.]

It's hardly worth the effort replying to you.

The articles at ALA are hugely valuable. What a drag it would have been if
they had taken that article down. It couldn't have been used to create a new
technique. When I take an article they've provided me and customize it for
my use (standards-compliant and CSS-validating) I feel like I am standing on
the shoulders of giants.

Here are a few of them:
http://www.alistapart.com/credits/

Now I'm off to create a website ... don't have time to argue. Life's too
damn short!

[Brian]

Lachlan Hunt wrote:

Lauri Raittila wrote:

in comp.infosystems.www.authoring.html, Lachlan Hunt wrote:

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.

Why is it not removed?

Because Cool URIs Don't Change! If articles were to be deleted just
because they are considered to contain somewhat bad advice,

"Somewhat bad advice?" UA string sniffing is about as dumb an idea as
there is in the .js world. Nearly 5 years have passed, and it has
apparently occurred to noone at ALA just how dumb an idea it is.

There's no need to delete the document entirely. Just remove the bogus
code and replace it with something more sensible, i.e., feature detection.
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.
Only if they maintain their web collection as badly as they write advice.
Although, even if it were properly configured with a 410 instead,

Yes, at a minimum, a request for a removed document should elicit 410
Gone from the server. A better solution is to correct the obvious mistake.

--
Brian

[Barbara de Zoete]

On Sun, 13 Feb 2005 13:10:04 -0500, gallery <m.******@comcast.net> wrote:

Now I'm off to create a website ... don't have time to argue. Life's too
damn short!

Please close the door on your way out.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Jukka K. Korpela]

Brian <us*****@julietremblay.com.invalid> wrote:

There's no need to delete the document entirely. Just remove the bogus
code and replace it with something more sensible, i.e., feature
detection.

There's also the possibility of inserting an emphatic warning at the start
of the document, saying that the document's content is now considered
outdated, obsolete, questionable, or whatever you wish to say.
This might be especially relevant if the update of the content will take a
considerable time or is uncertain (as most things on Earth are).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Brian]

[pointlessly excessive quoting snipped; gallery still hasn't grasped the
quoting concept]
gallery wrote:

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote...

On Sun, 13 Feb 2005, gallery wrote:

We don't need to get all upset because there are out-of-date
ideas on the site.
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.

It's hardly worth the effort replying to you.

Yet somehow you mustered that effort. Good for you.
When I take an article they've provided me and customize it for my
use (standards-compliant and CSS-validating)
All the standards-complying and css-validating won't do a thing if the
site is broken because of bad engineering.
Now I'm off to create a website ... don't have time to argue. Life's
too damn short!

Don't let the door hit you in the ass on the way out.

--
Brian