SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Map Mouseover Issue

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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kath View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •