[SOLVED] CSS Hotspot on Centered Image

[HuhWhat]

Hi, I've set up the following CSS for hotspots on a banner image:

This div takes up the entire width of the page. It contains the background image, and wraps the banner div.:
.banner-wrap {
width:100%;
height:388px;
float:left;
position:relative;
background-repeat: repeat-x;
background-image: url(images/banner-bground.jpg);
}

This div is 970px and is centered in in the banner-wrap. It contains the image, and wraps the hotspot:
.banner {
height:388px;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: center top;
}

This is the hotspot div. that contains the position and size specs for the hotspot. It wraps the hotspot links:
.banner .hotspot {
width: 90px;
height: 90px;
position: absolute;
top: 30px;
left: 30px;
}

so, here is the structure code:

<div class="banner-wrap">
<div class="banner">
<a href="x.html" class="hotspot">
</div>
</div>

What I want to do is have the hotspot follow the banner image as it "moves" when the browser window resizes.

I've tried the following to no avail:

(1) Set the .banner class to a fixed width of 970px. This actually uncentered the banner image somehow.

(2) Set .banner .hotspot positioning to percentages instead of fixed coordinates. Made no difference.

(3) set .banner .hotspot position to relative. No effect

3. Can anyone tell me what I should do?

Thanks a bunch,
MIke

[meesa]

How is it not following it?

[HuhWhat]

Hi, thank you for replying; I have already resolved this issue.