Image link border hover, Crossbrowser help 1

[lonechicken]

I have the following code in an attempt to have borders around thumbnail images changing colors while hovering. It works in IE, but not in Mozilla (probably Netscape 6+ as well). Mozilla kinda shows a weird underline thing instead of a full border around the thumbnail.

--In the CSS page--
a:link.image_link
{
border:1px;
border-thickness: 1px;
border-style: solid;
color: #000000
}
a:hover.image_link
{
border:1px;
border-thickness: 1px;
border-style: solid;
color: #00cc00
}

--In the HTML Page--
<a href=&quot;viewimage.asp?id=(number)&quot; class=&quot;image_link&quot;>
--------------------
The examples can be seen at

http://www.mywetcat.com/show_willow.asp

On the flip side, if I used border=1 for the image tag, and no border styles, it'll work in Mozilla but does nothing in IE when hovering. Any help?

 

[starway]

It's the first time I see such thing as &quot;border-thickness&quot;. The correct property is &quot;border-width&quot;. There are also soem other errors I saw.
This is how it should be:

a.image_link:link { border: 1px solid #000000; }

a.image_link:hover { border: 1px solid #00cc00; }


Pay attention that correct syntax for classes applied to links is [tt]a.classnameseudoclass[/tt]

&quot;border: 1px solid #00cc00&quot; works in all browsers and is a shortened record for
{ border-width: 1px; border-style: solid; border-color: #000000 }

 

[lonechicken]

Thanks, I actually just googled around and grabbed that CSS code from an &quot;instructional&quot; site, assuming it was correct syntax.

Anyway, your code doesn't seem to remedy the Mozilla 1.1 problem. Still the same result...

http://www.mywetcat.com/show_onyx.asp

which I used your code except called the style a.simage_link:link
so I wouldn't have to change the class attribute for the other pages.

Could this be a bug with Mozilla?

 

[lonechicken]

Okay, I think I've got it:
-- CSS file --
.image_link
a
{
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: #000000;
display: table-cell;
}
.image_link
a:hover
{
border-color: #cccccc;
}
-- html --
<td valign=&quot;top&quot; align=&quot;center&quot; class=&quot;image_link&quot;>
<a href=&quot;blah.htm&quot;><img src=&quot;blah.gif&quot; border=&quot;0&quot;></a>
</td>
----------

The CSS syntax looks a little weird to me, but it works in IE and Mozilla 1.1, and doesn't affect Netscape 4.

I tried changing it to a.image_link:link and a.image_link:hover, but then all the borders disappeared, so the above seems to be the working syntax.

 

[starway]

The way you wrote CSS class and applied it will never work as expected. The idea of adding class to <a> tag means that it will be assigned to it. What you did was assigning it to a different page element. No surprise that it doesn't work.

 

[BDNFLNC]

Have you looked at this on a Macintosh?

OSX and ie 5.2.1 here. The box outlines are all over the place. -----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.

 

[lonechicken]

Is there a website that does snapshots of what a page looks like on browsers like Mac's IE? I have no access to Macs.

 

[BDNFLNC]

The box outlines are better now. That's all I can tell.

Starway is right too. I may revisit the CSS if it were me.

-----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.

 

[lonechicken]

I settled on using...
----
a.image_link
{
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: #000000;
}
a.image_link:hover
{
border-color: #cccccc;
}
----
... in the CSS file, and putting the class call in the <a> tags of the html/asp pages.

This brings me back to the problem of it looking fine in IE (PC), but having a weird underline thing in Mozilla 1.1. I'll just leave that the way it is and move on, and let Mozilla and Netscape worry about fixing it on their end. It doesn't look too terrible for now, and I've got more important things to work on than how image links look.

Thanks all!

 

[xutopia]

isn't that the same as this :

a.image_link
{
border: 1px solid #000000;
}
a.image_link:hover
{
border: 1px solid #cccccc;
} Gary

http://www.xutopia.com

Haran

 

[lonechicken]

It is, in theory. But AFAIK, if you simply use border: 1px solid #000000; instead of border-top, border-left, etc., you will not be able to click on the images in Netscape 4.x.

I think Netscape 4.x implements border incorrectly or something, but if you leave border out and use the four explicit borders (top, left, bottom, right), Netscape 4.x just ignores it.

 

[xutopia]

yeah that is quite possible that Netscape 4 doesn't do that kind of stuff right. Why not simply drop that browser? Gary

http://www.xutopia.com

Haran

 

[starway]

Just &quot;simply drop&quot; is the most easy thing to do.

But there's a nice and elegant solution available:
[tt]
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;nn_styles.css&quot;>
<style type=&quot;text/css&quot;>
@import url(common.css);
</style>
[/tt]
This will do the following: nn_styles.css are for NN4.x and IE4 browsers that doesn't support @import CSS rule (IE4 doesn't require separate styles, therefore I named it nn_styles.css).
You should write more simple styles in this file that will be processed by older browsers and will create a proper look there. For example:
* don't use &quot;display: block&quot;
* don't use border definitions for <select>
* use proper font-size values to make the text look the same in all browsers (some pt values in NN4.x have to be larger by 1 point)
* use negative margin-top values to eliminate big gaps between <H_> headers and following content blocks

After it you add another css file that overrides styles for older browsers. Do it clever - override only those styles that need this and use others from the first .css file without changes.

@import is supported by IE5+, Opera 5+ and Mozilla - that means that it is applicable to all modern browsers with better CSS support. Older ones will just not see that stylesheet file.

This method always works perfectly without exceptions. Create the style separations without any single string of script.

 

[xutopia]

say there starway this solution is great but doesn't it make even the new browsers download twice as much and you code twice as much?

Take netscape 4 out of the equation and let the CSS downgrade gracefully. It doesn't matter if things are not as picture perfect for 4.x browsers. They are 5 years old anyways! Gary

http://www.xutopia.com

Haran

 

[starway]

That's why I wrote &quot;Do it clever&quot; and override only some styles by a new stylesheet. (If you have paid attention, I always emphasize that you should use your head in everything you do)
Of course, it depends on the actual design layout, and sometimes it's necessary (or easier) to override the entire stylesheet.
But even in this case &quot;download twice as much&quot; is just another 2-3kb of the .css file, plus 2 more strings of html. Much less than any image that you usually see on some page. I think this is acceptable price for backward compatibility.

 

[xutopia]

granted.
Gary

http://www.xutopia.com

Haran