Mozilla problem height of a picture

Mouse Over reports 12px height instead of 28px

[jetteroheller]

<a href=news.htm><img src=picture.png
height=28 width=40 border=0 alt='News RSS feed'></a>

The picture is 40 width 28 height

A part of the pixture is transparent.

The CSS is, that when the mouse is over the link, the background color changes.

MSIE: everything works fine. When the mouse is over the picture,
background color changes at the transparent background part like expected. The mouse over javascript reports 28 height of the object.

Mozilla based browsers like Firefox and Chrome: only a 12 px height stripe changes the background color at the transparent part.
The mouse over javascript reports 12 height of the object.

At other pictures, all work fine, correct height reported.
Only this picture makes a problem.

[jetteroheller]

Additional infos:

offsetHeight to take the height.

The stripe is at the bottom of the picture.

When I bring the mouse to the top of the picture,
the stripe changes color, but the mouse over effect does not work.

When I move down to the stripe, the mouse over still does not work.

Only when I enter the object, where the stripe is, the mouse over event is executed.

This makes the mouse over event handling at this picture a chaos,
while all works fine at MSIE 7.

[jetteroheller]

I discovered now a solution

<a href=news.htm style=font-size:28px><img src=picture.png
height=28 width=40 border=0 alt='News RSS feed'></a>

Now it works fine, but I do not understand what Mozilla bug causes this.

[tedster]

That is a strange one - and the font-size kludge is just a bit bizarre, even though nice to know. Does the png file use alpha channel transparency?

[jetteroheller]

The PNG is stored by Paint Shop Pro 8
with 256 colors and transparent color set

I have to expand my solution with a "valign=top"

<a href=news.htm style=font-size:28px><img src=picture.png
height=28 width=40 valign=top border=0 alt='News RSS feed'></a>

When valign=top is not set,
the mouse over does not work when the mouse comes down to the top of the picture.

Without any handling:

There is the whole picture area
There is the stripe

When the mouse enters the whole picture area at a location where the stripe is not, the stripe reacts, but mouse over does not react.

The mouse over reacts only when the mouse enters the
picture where the stripe is.

The handling is to expand the active stripe to the whole picture by
style=font-size:28px in the href and
valing=top in the img

the mouse over handler gets by object.offsetHeight only the height of the stripe. So my mouse over handler executes my mouse has left the watched objects, when ths mouse is out of the stripe.

This is at all Mozilla and Opera browsers tested.