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/

On Sun, 11 Nov 2007 11:49:02 +0000, Mark wrote:
> 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;
}


--
Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/css/white-space-property/

Safalra (Stephen Morley) wrote:
> On Sun, 11 Nov 2007 11:49:02 +0000, Mark wrote:
>> 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;
> }

This works a treat.

Thanks

In article <1sckw3ygv9s9g$.qambj4s1zq74$.dlg [at] 40tude.net>,
"Safalra (Stephen Morley)" <usenet [at] safalra.com> wrote:

> On Sun, 11 Nov 2007 11:49:02 +0000, Mark wrote:
> > 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:

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.

--
dorayme