hover in Firefox

[mmi]

Hey

I'm trying to get some text links to change color onmouseover. This works in IE, but not in Ff or Safari:

a:hover {color:#000000}

This works in all three:

a.nav:hover {color:#000000}

Do ya need to use a CLASS to make hover work outside IE? I read that <A> is not a block element, so I tried adding display:inline-block, but didn't get anywhere.

I also found this:

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! — w3schools

I tried adding:

a:link {font-size:10pt}
a:visited {font-size:10pt}

in front of the hover thing, but nothing.

I suppose I could create and designate a class for all these links, but I figure I must be doing something wrong. I expect stylish types may speculate that there's some conflict with other code. If that looks like it, I'll post some more code.

Thanks

[diades]

Hi Eric

This: a:hover {color:#000000} should be fine as far as I know, this: "a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! " is only really if you are using those; If it is just the hover then you should have no worries.

Is the page up so that we can see?

[mmi]

Here's an example of what I'm trying to clean up. Mmy coding skills at the beginning of the millennium were just as third-rate as they are now, so …

I can't take any credit for the (largely) organized nature of the imported stylesheet. That goes to our resident CSS specialist, Uncle Ben. ("Say hello to Mrs. Robinson, Benjamin.") Otoh, I am responsible for whatever messiness may exist at the top, which could well be the "source" ;<) of the trouble:

CSS Block

<style type="text/css">
/*<![CDATA[*/

   a {text-decoration:none; font-size:10pt}

   a:hover {color:#f4c508}

   a.n:hover {color:#ff0000}

   a.ind {display:inline-block;text-indent:10px;}
 

/*]]*/>
</style>

a.n:hover {color:#ff0000} is there to make the text links in the menu at the top to be visible onmouseover against the background. (Don't ask.)

I'm willing to make any reasonable changes to get this to work. I'm a very stylish person, you understand, so I wanna have the titles turn MMI gold onmouseover. The sad thing is that the characters are so thin in Firefox (as opposed to IE, where it works) that you can hardly notice the change.

I tried using the "indented" parts to apply a class and it worked. I'm just hoping to do this in a relatively clean manner. Otherwise, the long list of people begging mme to build sites for them may diminish.

[diades]

Hi Eric

I do not have safari but, it works just fine for me in Firefox

[mmi]

Hey

Thanks for that, but I'm guessing we're not on the same page here — at least not the same part of the page. Do the recipe titles on this doc change color onmouseover for you? For mme, they only work on IE.

[diades]

Hi Eric

Sorry, I thought that you were discussing the top menu.

The menu items do not change in FF. The styles are confusing.

You have:

<td>
<div class="app">
<a name="1" href="http://ememi.com/cmw/recapp.shtml">
<b>APPETIZERS</b>
</a>
<br>
<b>Cheese</b>
<br>
<a class="ind" href="http://ememi.com/cmw/recapp.shtml">Crescent Brie and Almonds</a>

CSS Block

<style type="text/css">
/*<![CDATA[*/

  

a { font-size: 10pt; text-decoration: none;}

a:hover { color: #F4C508;}

a.n:hover { color: #FF0000;}

a.ind { display: inline-block;  text-indent: 10px;}

body {}

td { color: #F4C508; font: 10pt "Comic Sans MS";}

b { font-weight: 600;}

a.app { color: #FF779B;}

a.bee { color: #CC3333;}

a.bre { color: #CC9966;}

a.cak { color: #D2691E;}

a.can { color: #931C09;}

a.chi { color: #FF0075;}

a.chu { color: #8B008B;}

a.coo { color: #960741;}

a.ice { color: #FF3366;}

a.jam { color: #C71585;}

a.pas { color: #1E90FF;}

a.pic { color: #00844A;}

a.pud { color: #D1765A;}

a.rel { color: #808000;}

a.sal { color: #006400;}

a.sau { color: #FF4A50;}

a.sea { color: #278E60;}

a.sou { color: #FF6347;}

a.sta { color: #D16347;}

a.veg { color: #148906;}

.app { color: #FF779B;}

.bee { color: #CC3333;}

.bre { color: #CC9966;}

.cak { color: #D2691E;}

.can { color: #931C09;}

.chi {  color: #FF0075;}

.chu { color: #8B008B;}

.coo {  color: #960741;}

.ice {  color: #FF3366;}

.jam { color: #C71585;}

.pas { color: #1E90FF;}

.pic { color: #00844A;}

.pud { color: #D1765A;}

.rel { color: #808000;}

.sal { color: #006400;}

.sau { color: #FF4A50;}

.sea {  color: #278E60;}

.sou { color: #FF6347;}

.sta { color: #D16346;}

.veg { color: #148906;}

.app a { color: #FF779B;  line-height: 14pt;}

.sou a { color: #FF6347;  line-height: 14pt;}

.sal a {  color: #006400; line-height: 14pt;}

.sta a {  color: #D16346; line-height: 14pt;}

.veg a { color: #148906;    line-height: 14pt;}

.sau a {    color: #FF4A50;    line-height: 14pt;}

.pic a {    color: #00844A;    line-height: 14pt;}

.chu a {    color: #8B008B;    line-height: 14pt;}

.rel a {    color: #808000;    line-height: 14pt;}

.bee a {    color: #CC3333;    line-height: 14pt;}

.sea a {    color: #278E60;    line-height: 14pt;}

.chi a {    color: #FF0075;    line-height: 14pt;}

.bre a {    color: #CC9966;    line-height: 14pt;}

.pas a {    color: #1E90FF;    line-height: 14pt;}

.pud a {    color: #D1765A;    line-height: 14pt;}

.cak a {    color: #D2691E;    line-height: 14pt;}

.ice a {    color: #FF3366;    line-height: 14pt;}

.can a {    color: #931C09;    line-height: 14pt;}

.coo a {    color: #960741;    line-height: 14pt;}

.jam a {    color: #C71585;    line-height: 14pt;}


 

/*]]*/>
</style>

First you tell it:
a { font-size: 10pt; text-decoration: none;} <---- Set all links
a:hover { color: #F4C508;} <---- Set all links when hiovered over

then:
a.ind { display: inline-block; text-indent: 10px;} <---- Set all links of class 'ind'

and:
td { color: #F4C508; font: 10pt "Comic Sans MS";} <-- any children within this cell could inherit the color

and:
.app { color: #FF779B;} <---- set the color of class 'app'

and:

.app a { color: #FF779B; line-height: 14pt;} <--set the color for any links with the element that is set to class 'app'

That is 3 potential colors etc.,

Is this your old NS4 page Eric? Layers? - dead, decomposing, smelly, keep away from food. :)

Try:

a.ind:hover {color:#f4c508;}

[mmi]

Hey again

Thanks for yer help.

I figure I wanna keep everything except the top block (what I put up in post #3).

Yeah, it sure looks confused t' mme. Like I said, I can get it to work on the ind class like you did. But I wanna have it work on all of 'em, not just the indented ones. I suppose I could write something that'll work, but I'd like to do something at least semi-elegant.

[coothead]

Hi there mmi,

The solution to your problem is this..

a:link:hover {
    color:#000;
 }

...which will change the color of all the links, and work in...

• IE 9
• Firefox 14.0.1
• Opera 12
• Safari 5.1.7

To change individual links, ensure that you cascade thus...

a:link:hover {
    color:#000;
 }
a.n:hover {
    color: #f00;
 }

coothead

[mmi]

Major breakthrough, mmy friend. The missing "link," ya might say.

I'm getting things to work cross-browser now. But a confusing (to mme, at least) issue remains.

Using the "main" Titles page (cuz I can just C&P into the smaller ones), I can't figure out why a few of these don't work. I was able to clean up a couple by removing (old) FONT tags that I missed in an earlier revision (probably ten years ago), but some remain:

• the headers for APPETIZERS (both Ff and IE), and SOUPS and SALADS (Ff)
• Crescent Brie and Almonds (both), Gougères (Ff), Straws (just IE )
• a similarly confusing mix of soup and salad recipes
• the headers for STARCHES and VEGETABLES (one in each browser — geez)
• Baked Cheese Grits (IE)
• Glazed Carrots (Ff)
• Swiss Baked Eggs (Ff)
• header for ICE CREAM (Ff)
• Butter Pecan and Golden Cups (Ff)

The only pattern I can detect (and it's not much of one) is that the headers for ICE CREAM and COOKIES are bolded and italicized with HTML (obviously changeable) and associated with window.open functions.

Darned if I can figure it out.

[mmi]

here's the block (er, jumbled mess?) I have now:

CSS Block

<style type="text/css">
/*<![CDATA[*/

   a {text-decoration:none; font-size:10pt}

   a:link:hover {color:#f4c509;}

   a.n:hover {color: #ff0000;}

   a.ind {display:inline-block;text-indent:10px;}

   body {scrollbar-arrow-color: #000080; scrollbar-3dlight-color:#000080; scrollbar-face-color:#FCE296; scrollbar-track-color:#F4C508}

   td {font:10pt "Comic Sans MS"; color:#f4c508} 

   b {font-weight:600}
 

/*]]*/>
</style>

[coothead]

Hi there mmi,

if you give me a little time I will recode your page for you.

coothead

[mmi]

You can have all the time you want. And I appreciate it. You realize, of course, the pressure placed on mme to accept yer revision.

Coots bite, and twist with sharp bills. I know they hurt when I handle them (banding them) — http://www.retrievertraining.net/for...l=1#post690886

Uh oh!

[coothead]

Hi there mmi,

I don't know about coots.

The cootie, though, definitely does.

you certainly wouldn't want them to make their home in your nether regions.

As for my code, feel free to take it or leave it.

I only do it to exercise the little grey cells, in the hope that it may help, in
some small way, stave off senile dementia.

coothead

[coothead]

Hi there mmi,

check out the attachment to see some simplified coding.

coothead

[mmi]

cooties: the only reference I can recall that I've heard to that since grammar school was in a Simpsons episode

As you know, it works. I'm guessing the key to this is that yer HTML is considerably better than mine. And I may well end up adapting the whole thing. But that would (I expect) require a lot of rewriting. So I'm gonna hold off for the moment and see if yer colleague Ol' Doc Caislander can figure out a way to do just a little fiddling and get the desired result. Of course, he hasn't been around much lately, so I may decide at some point to just move ahead on the changes. After all, like I said, I figure the markup itself is a "marked" improvement, so …

Dr. Spivey: To be honest with you, McMurphy, what it says here is that they think, … THEY think … you've been faking it in order to get out of your work detail. What do you think about that?
Randle McMurphy: Do I look like that kind of guy to you?
Dr. Spivey: Let's just be frank for a minute, alright Randall, if you would. Tell me: do you think there's anything wrong with your mind, really?
Randle McMurphy: Not a thing, Doc. I'm a goddamn marvel of modern science.
Dr. Spivey: You're going to be here for a period, for us to evaluate you. We're going to study you. We'll make our determinations as to what we're going to do and give you the necessary treatment as indicated.
Randle McMurphy: Doc, let me just tell you this. I'm here to cooperate with you a hundred percent — a hundred percent. I'll be just right down the line with you — you watch. 'Cause I think we ought to get to the bottom of … R.P. McMurphy.