Image Map Mouseover Issue

[kath]

Hi

I have an image map marked into different locations.
When the user mouses over a name in the right side frame, an image I created to cover the location for example location N,
will highlight the specified area.

I did this using hard-coded values which doesn't work out too well for me - it works ok in IE, but in FireFox, the top margin
drops a bit.

How do I fix this?

(images attached)

part of my code below...

<div id="ardene" class="tt" style="left:280px;top:288px;height:72px;">
<b>ARDENE &nbsp;&nbsp;&nbsp;1.877.606.4233 x065</b><br/>
Some text goes here.
<br class="clear">
<div style="margin-top:-205px;margin-left:179px;">
<img src="images/hover/hover-n.png" />
</div>
</div>

[Stevie D]

You'll need to give us more of the code than that, there's not enough there to see what's happening.

But it looks to me like it isn't just the top margin that Firefox is changing – the arrow is at a different angle as well. What dimensions have you put on the arrow image?

[kath]

Hi

The red arrow has nothing to do with code, I just put that in so you could look at the "N" location and see what the differences
are between ie and ff.

Link:
http://mandatorymarketinginc.com/test/directory.htm

Thanks

[Stevie D]

The red arrow has nothing to do with code,

I just put that in so you could look at the "N" location and see what the differences are between ie and ff.

You've got lots of inconsistent positioning right through there. Apart from the fact that Ardene is currently completely out of place and sitting in the middle of a parking lot (something to do with commenting out the correct bit of code!), your problem is that you're relying on the text boxes being exactly the height you've specified. The problem is that you can't guarantee that – because different browsers will render text at slightly different sizes, text that in one browser will fit neatly into the box you've allocated it might take up more space in another browser, meaning it will stretch the box. (If you have a fixed-height box and too much text, the browser default is to let the box grow taller, unless you use the overflow property to tell it not to. I don't think that clipping or scrolling would be sensible here, so you're better off letting the box grow where it needs to).

What looks to me like an easy way to fix this would be to put the image first within the <div class="tt">, before the text – and that way you are moving it from a point that is absolutely fixed and isn't dependent on the text fitting nicely, so you can be sure of exactly how much you need to move it by, which should give you consistent positioning across browsers.