Question

I am midway through creating a website and I have come across an issue that I do not know how to fix, on the site there is a rectangular image with a hotspot in the center, I have used the following css code –

 #image_map  
    {
        display: block;   margin-left: auto;   margin-right: auto; 
        width:302px;
        height:65px;
        background:url(Images/ManordLogo.png) no-repeat;
        position:relative;
        }
        #image_map a
        {
            display:block;
            position:absolute;
            }

            #image_map a#link1
            {
                width:42px;
                height:49px;
                top:11%;
                left:43%;
                }

The first line centers the image and allows the page to be scale-able, the following code defines and creates the hotspot. Everything works fine and the hotspot & Image remain in their correct position, however on the design side I need the image about 20px lower than its current position at the top of the page.
Every-time I try and use margins or padding or any form of positioning the image jumps to the top right hand corner of the page, and I have no Idea why.

I need the image and the hotspot to stay the same and the position of the hotspot to remain relative regardless of the browser window size but for the design I need the image to be moved down by 20px

Where am I going wrong and how can I achieve this?

EDIT – I have created JsFiddle Version, so you can see what I mean, the black represents the entire image and the aqua represents the hotspot, I need the entire block (black and aqua) to move down by 20 pixels while still remaining centered and scale-able.

Link to JSFIDDLE – http://jsfiddle.net/cT3Eu/

Thank you.

Answer 1

I have tested it in IE7, 8, 9, current Firefox version and current Chrome version, and the add of margin-top: 20px; for #image_map works fine for me: http://jsfiddle.net/cT3Eu/1/