With text links one can use the stuff below to remove underlines from text links until one hovers the mouse over the text:

<STYLE TYPE="text/css">
<!--
a:link {color:blue; text-decoration: none;}
a:visited {color:#006000; text-decoration: none;}
a:hover {color:#CC0000; text-decoration: underline;}
a:active {color:#777777; text-decoration: none;}
-->
</STYLE>
---------------
Now the above scheme also works for removing the line around jpeg buttons that are used as links when in Firefox (except when one hovers over the button), but - - - How do I get rid of the blue line that surrounds a jpeg button link until I click on it and then it turns to red after being used in IE? I have tried everything I can think of, and I *cannot* seem to get rid of the line surrounding the link button in IE; yet I see pages that have link buttons on the web that do not suffer from this problem in IE . . . and I have looked at the source code of said pages (can't think of any just now, unfortunately), and I never have been able to decipher what is going on.

Thank you.

Karl

just a guess, but try this...

<STYLE TYPE="text/css">
<!--
a:link {color:blue; text-decoration: none;}
a:visited {color:#006000; text-decoration: none;}
a:hover {color:#CC0000; text-decoration: underline;}
a:active {color:#777777; text-decoration: none;}

a img {text-decoration: none; border: 0px solid;}
a:visited img {border: 1px #0000ff;}
-->
</STYLE>

Well, that removes the line around it OK. Actually one only needs:

<STYLE TYPE="text/css">
<!--
a img {text-decoration: none; border: 0px solid;}
a:visited img {border: 1px #0000ff;}
-->
</STYLE>

The problem is, now I cannot get any outline on mouse hover to indicate that that is going to be the one clicked on. *All* outlines are gone . . . ! The img text-decoration: none part seems to over-ride anything else and the visited image does not have the blue border of one pixel that would be implied from the above either. However, it works the same in Firefox as IE which is refreshing!

Any other ideas? This is definitely a huge help, but I would like to have a hover deal there.

Thank you.

Karl

you could try putting border="0" in your actual image tag instead of specifying it with CSS.

try adding this on the end to see if that will show anything...

<STYLE TYPE="text/css">
<!--
a img {text-decoration: none; border: 0px solid;}
a:visited img {border: 1px solid #0000ff;}
a:hover img {border: 1px solid #ff0000;}
-->
</STYLE>

Well, that worked fine, except that there was an unexpected result (which I should have thought of before); when you add an outline, the whole column of buttons expands vertically by 2 px because of the addition of the surrounding border when you hover the mouse over it. So I fixed that by adding the background color to the link borders except for the hover one:

a img {text-decoration: none; border: 0px;}
a:link img {border: 1px solid #fffaf0;}
a:visited img {border: 1px solid #fffaf0;}
a:hover img {border: 1px solid #ff0000;}

(where fffaf0 happened to be the background color of the directory with the buttons).

I think this is as good as its going to get without going to mouseover double images for the buttons (which I don't want to mess with), and I thank you very much for your assistance.

I had tried all sorts of variations on your original post and was getting nowhere until I read your last one!

Thanks again.

Karl

Well I got carried away with my enthusiasm too soon . . . hover *does not* work in IE! I was so carried away with the way it was working in Firefox, that I forgot to check IE. What a pain. Anymore neat ideas?

(And no, its not the end, but there must be some way to make this work)

Karl

I use IE and hover works fine for me.

Well, Red, I don't know how you are doing it. I have tried it on 2 computers running Win98SE, one with IE 5.5 and the other with IE 6 and it will not work on hover with either of them . . . ! Absolutely nothing happens when I hover over a button image with the mouse in IE; yet it works perfectly with Firefox.

Are you by any chance running WinXP? Do you suppose there is a difference in IE 6 between the two? Seems rather unlikely. But if there is, it is still no good because too many people are going to be like me running an older OS, and if you are running older than XP, then I cannot conceive of what the difference would be.

Any input from some other people would certainly be appreciated, because I am about to give up on this.

Thank you.

Karl

Did I miss something? How do you guys know that HIS hover works when he hasn't even provided a link to the site?

Well, maybe I am naive, but I just assumed that since we are here supposedly to help each other, that people would be honest when they tried something . . . ?

Karl

no i mean you haven't provided a link to your site, just the code but people are saying that it works for them. and i just wondered how do they know that your site works when they only have a bit of code and not the whole site.

Oh, I'm sorry; I misunderstood you. I don't have it on the web; just on the desktop while I play with it. My site does not have buttons because I have not been able to get the buttons to work; I am just using underlines and colors on text links (which do work) on the actual site.

Karl

When I say I cannot get the buttons to work; I mean the outline to work . . .


Karl

why don't you post the whole page's code. maybe something else is interferring with it?

or better yet... upload it someplace and we can see things happening in action (or not).

OK, here is a temporary link to the experimental button page:

http://www.rmtn.net/index8.html

It works fine in Firefox and not in IE; that is mouse hover does not work in IE.

The code for the page is sufficiently minimal, that if you look at the link to try IE, you can view the source code more easily than my taking up space to paste it here.

I have tried the:

a img {text-decoration: none; border: 0px;}
a:link img {border: 1px solid #fffaf0;}
a:visited img {border: 1px solid #fffaf0;}
a:hover img {border: 1px solid #ff0000;}

both in the upper style section and also in its own <STYLE> . . . </STYLE> section in case the "text/css" was interfering somehow. Makes no difference.

I have also found that
" a img {text-decoration: none; border: 0px;} "
can be removed without seeming to affect it.

Now, if Red can see it work in IE, then obviously, he is doing something in his experiment that I am missing, so I hope that he (or someone else) will look at this and tell me why mine is not working in IE.

My site is currently working fine with colors and underlining with just plain text links at http://www.rmtn.net , but I have been fooling with buttons sufficiently long with no hover working (other than double images with mouseover), that I would really like to know what I am doing wrong!

Thank you.

Karl

Okay, this is what I think is the problem... this part:

a img {text-decoration: none; border: 0px;}
the above means for all img links, have border: 0;
a:link img {border: 1px solid #fffaf0;}
a:visited img {border: 1px solid #fffaf0;}
a:hover img {border: 1px solid #ff0000;}


i think that may be over riding the other things in IE...

k, i think i got it to work, kinda.
this is a case where IE and FF go in two different directions.

sample webpage. copy it, save it as new page, upload it, and test it out. it is not using the style you want at the moment, but it seems to work and you can adjust the values as you see afterwards.

<html>
<head>
<title>Karl's pictures from the Rocky Mountains</title>
<STYLE TYPE="text/css">
a img {border:0px solid #000; padding:0px; margin:0px;}
.foo a img {border : 1px solid #00f;}
.foo a:hover img {border : 1px solid #f00;}
</STYLE>
<!--[if IE]>
<style type="text/css">
.foo a {border : 1px solid #00f;}
.foo a:hover {border : 1px solid #f00;}
</style>
<![endif]-->
</head>
<body background="http://www.rmtn.net/index_files/lgrey013.jpg">

<div class="foo">
<a href="http://www.rmtn.net/index_files/scenery.htm"><img src="http://www.rmtn.net/buttons/scenery.jpg" width="88" height="20">
</a></div>

</body>
</html>

Well I pasted the following in:

<html>
<head>
<title>Karl's pictures from the Rocky Mountains</title>
<STYLE TYPE="text/css">
a img {border:0px solid #000; padding:0px; margin:0px;}
.foo a img {border : 1px solid #00f;}
.foo a:hover img {border : 1px solid #f00;}
</STYLE>
<!--[if IE]>
<style type="text/css">
.foo a {border : 1px solid #00f;}
.foo a:hover {border : 1px solid #f00;}
</style>
<![endif]-->
</head>
<body background="index_files/lgrey013.jpg">

<div class="foo">
<a href="index_files/scenery.htm"><img src="buttons/scenery.jpg" width="88" height="20">
</a></div>

</body>
</html>

And tried it, and it works fine in Firefox, but in IE it has a very odd looking extended line (border) on the right and bottom, altho it does change in IE on hover.

You can see it at

http://www.rmtn.net/index10.html

---------------------

Someone else suggested the following code:

a:link {
border: 1px solid #fffaf0;
display:block;
width:88px; }
a:visited {border: 1px solid #fffaf0;}
a:hover {border: 1px solid #ff0000;}
a:active {border: 1px solid fffaf0}
a img {border:1px;}

This works fairly well in IE (except there is an odd looking little dotted line lower left of button on active link), but the vertical spacing between buttons is all messed up in Firefox for some reason when I first go to the site (having cleared history), despite the fact the I have fixed it again where each condition has 1px around it and the individual buttons are spaced apart by 3 pixels down in the image part. But after clicking on each link, the spacing is down to the minimal amount like it is supposed to be. And also, in Firefox, the red hover border is moved down. Now why is all that? This stupid thing is turning into a career!

You can view this particular deal at:

http://www.rmtn.net/index9.html

Thank you.

Karl

to get rid of that line thing, take this part that is one two lines...

<a href="index_files/scenery.htm"><img src="buttons/scenery.jpg" width="88" height="20">
</a></div>

and put that </a> on the direct end of the image tag like so...

<a href="index_files/scenery.htm"><img src="buttons/scenery.jpg" width="88" height="20"></a>
</div>

Well, how about that. Why did it make any difference? There is still a little odd looking deal at the lower left corner after clicking on it, but it is certainly much better.

However, if it takes two different schemes for the two browsers, what about all the other browsers out there? Won't that be a problem too?

Incidentally, what is the deal on the 3 character color code rather than 6?

Thank you.

Karl

bout the spacing... it is a rare occurance that spacing counts. this just happens to be one of them.

other browsers are probably around 2% of your visitors. IE and FF will be the top most two. get your stuff to work in those, and you should be set. any others should comply if the big two do.

3 digit color codes = shortcut for 6 digit.
just double each letter or number.
00f = 0000ff
0f0 = 00ff00
f00 = ff0000

dunno bout that weird little left line thing though, sorry... :(

OK, thanks for the color info. Look at index9.html. I have it working using display:block and it works! Got to learn more about this css stuff, clearly!

Karl

hm. interesting. learn something new each day... :D

Did I miss something? How do you guys know that HIS hover works when he hasn't even provided a link to the site?

I said hover works for me. Not /his/ hover as I haven't been to his page. It was a general statement.

P.S. I'm a she.