Link hotspot going beyond image in Firefox

Link hotspot going beyond image in Firefox

am 11.11.2007 12:49:02 von Shion

Hello

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

alt="My Logo">



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/

Re: Link hotspot going beyond image in Firefox

am 11.11.2007 15:46:43 von Safalra

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:
>
>

> alt="My Logo">


>
> 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/

Re: Link hotspot going beyond image in Firefox

am 11.11.2007 17:26:26 von Shion

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:
>>
>>

>> alt="My Logo">


>>
>> 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

Re: Link hotspot going beyond image in Firefox

am 11.11.2007 22:10:09 von dorayme

In article <1sckw3ygv9s9g$.qambj4s1zq74$.dlg@40tude.net>,
"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:
> >
> >

> > alt="My Logo">


> >
> > 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