Link hotspot going beyond image in Firefox

[Mark]

Hello

I have a graphical logo inside a h1 element that I want to be a link:

<h1><a href="#"><img src="images/logo.gif" width="228" height="67"
alt="My Logo"></a></h1>

This worked fine in IE and Opera, but in Firefox and SeaMonkey there was
some unwanted whitespace below the image. I got rid of this by putting a
pixel height on the h1 equal to the height of the image, but the
clickable 'hotspot' of the link goes beyond the bottom of the image.

What is going on here?

http://www.lester1.eclipse.co.uk/test/

 

[Safalra (Stephen Morley)]

I have a graphical logo inside a h1 element that I want to be a link:

<h1><a href="#"><img src="images/logo.gif" width="228" height="67"
alt="My Logo"></a></h1>

This worked fine in IE and Opera, but in Firefox and SeaMonkey there was
some unwanted whitespace below the image.

This sounds like the standard problem where Firefox positions images on the
baseline rather than at the box bottom (this is actually the correct
behaviour according to the specification). There are a couple of options:


h1 img{
display:block;
}


Or:


h1 img{
vertical-align:bottom;
}

 

[Mark]

This sounds like the standard problem where Firefox positions images on the
baseline rather than at the box bottom (this is actually the correct
behaviour according to the specification). There are a couple of options:


h1 img{
display:block;
}

This works a treat.

Thanks

 

[dorayme]

This sounds like the standard problem where Firefox positions images on the
baseline rather than at the box bottom (this is actually the correct
behaviour according to the specification). There are a couple of options:

All my Mac browsers including Opera gives the "unwanted space"
and I am sure this is quite correct behaviour. Try this in
different browsers:

http://tinyurl.com/2x3t8f

btw, some browsers (e.g. Opera) are unusual in how they place
underlining.