CSS - border hover problem in Firefox

_Andy_

Morning all.

I'm trying to create a hover effect in a page so that -

1) Links which are text have a red dashed 1px underline / border-bottom and a solid 1px underline / border-bottom when hovered.

2) Links which are images have a red dashed 1px border all around, and then a solid 1px red border all around on hover.

This works fine in IE however Firefox renders the border only at the bottom of the image. It seems like it's trying to wrap the border around the text which would have been there if it wasn't an image.
It changes from dashed to solid on hover but the border still doesn't wrap the image.

Any ideas?

I've tried

a !!
text-decoration: none;
border-bottom: 1px dashed red;
color:#000000;
}
a:hover !!
text-decoration:none;
border-bottom:1px solid red;
}
a.test img !!
border: 1px dashed red;
}
a.test:hover img{
border: 1px solid red;
}

<a href="#" class="test"><img src="#" /></a>

But this results in the border and hover effect being OK but a red dashed line underneath the image. (i.e. an additional bottom border)

Thanks

PS the "!!" is !! but the forum changes it for some reason.

FreheitOverture

Have you tried border-bottom, border-top, border-left, border-right and doing it the long way?

_Andy_

Hi - just gave it a try - no change.

The code I quoted above would work fine if it wasn't for the underline / bottom-border still appearing twice on the images. (this appears in IE and FF)

_Andy_

I've found a workaround for FF, if I use

a !!
text-decoration: none;
border-bottom: 1px dashed red;
color:#000000;
}
a:hover !!
text-decoration:none;
border-bottom:1px solid red;
}

for styling the links, this gives me the right effect for text links. Then

img.trythis{border:dashed red 1px;}
img.trythis:hover{border:solid red 1px;}

- combined with <a href="#" style="border:none;"><img src="" class="trythis" /></a>
Gives me the effect I want in FF but now IE (6 at least) doesn't change the border from dashed to solid on hover.

Any ideas?

Cheers

_Andy_

Followup - I've realised IE6 doens't support :hover except for a{.

So I'm back to square one i.e. having to use the a.className:hover{ to create the hover effect, but FF isn't rendering the border all the way around the image (just the bottom half, pretty much).

If anyone knows a workaround I'd be very grateful!

bazzlad

To make IE6 emulate a HOVER class:

Step 1
Paste the following into a notepad. Save as hover.js

// JavaScript Document
function phpads_deliverActiveX(content)
!!
    document.write(content);    
}

sfHover = function() 
!!
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) !!
        sfEls[i].onmouseover=function() !!
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() !!
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Step 2
Put this code in the HEAD of your HTML file
[html]<script src="hover.js" type="text/javascript"></script>[/html]Step 3
Use the .sfhover class in your css eg:

#whatever.sfhover{
border:1px solid #ffffff;
}

Step 4
Buy me a beer :beer:

_Andy_

Cheers Bazz - top work

I'll go through the JS tonight and make sure I understand it fully as well.

Do you think there's any way of getting FF to render the border correctly, i.e. rather than use JS to workaround IE6 not using hover on imgs, is there anyway to use CSS to workaround FF not rendering the border properly on the <a> surrounding the image? (hope that makes sense)

Thanks again, much appreciated

bazzlad

Hey mate,
Sorry it took so long - the weekend happened.
Yeah I see your problem now, what I'd do is this:

a{
text-decoration:none;
}

a img{
border:1px dashed red;
}

a:hover img{
border:1px solid red;
}


a.link{
border-bottom:1px dashed red;
}

a:hover .link{
border-bottom:1px solid red;
}

and then this

<a href="www.google.com"><img src="images/google.jpg" /></a>

<a href="www.google.com" class="link">test</a>

This will work - you just have to use class="link" for all your text links.

bazzlad

Oh, and if you don't want every linked image to have that simple change the code to:

a img.test{
border:1px dashed red;
}

a:hover img.test{
border:1px solid red;
}

and do <img src="whatever" class="test" />

Hope that helps.

Rich

_Andy_

Cheers Rich, really appreciate your help.

bazzlad

Not a prob - any more css/html probs, feel free to PM me, save making a thread (it's what I do for a living) :P