Dreamweaver - image link border in FF

Author

image link border in FF

Lossed

2004-08-26, 12:21 pm

Hi everyone,

Here's the page:
http://www.mpg.net.nz/NewLayout/layout.htm
The image has a border showing only on hover. It works fine in IE6 on PC,
but not in FF0.9 on PC and I can't check others (would appreciate comments
and suggestions from those with other browsers/platforms).

In FF0.9, the hover border causes the vertical scroller to show,
irrespective of the window size. The border also starts half way down the
image, which was not the look I was after :-)

Following suggestions, I tried a strict doctype but it didn't seem to help.
Actually, i tried tinkering for about an hour or more that I didn't really
have and i think it actually got worse before getting back to where I
started !
Any suggestions?
Tks.
Lossed

TC2112

2004-08-26, 12:22 pm

Hello, Firefox and NN7 are actually rendering the border correctly for the
code you have. IE is wrong, though it's the look you want.
I think I have the fix.
Currently your borders are on the <a> elements and in Firefox and Netscape
,as you hover, you see where the <a> elements actually are, visually only half
as high as the image on your page. IE is overflowing them to fit the image
inside the <a> tags.
To make the border surround the image in IE, Firefox, NN try this:

.footer a:hover {background: #FFFFFF;}
.footer a:hover img {
border: 1px solid #000000;
margin: 0px;
}

Why the a:hover {background:#FFFFFF;} first? That's to fix an IE bug where you
can't target an image with a hover rule without first setting a hover rule.
Declaring a hover rule with a white background didn't change the look of
things.
The next line simply puts the border on the image instead of the <a> element.
(I just added img to your code there)

As far as the scrollbar appearing in Firefox on hover, this fixed that as
well.

Take care :-)