how to get markers behave "responsive" as well?

Recently I made a nice assembly of some rain radar pictures, allowing to view immediately if rain is coming up, yes or no.

When making the URL-window smaller, the two pictures (positioned next to each other) will shrink as well. So far so good. For an example, click here ...

On each of the two pictures, a red marker can bee seen, in this case showing the exact location of a small village near the city of Hamburg in Germany.

However, when I make the URL-window smaller, both markers (obviously) start moving to other positions, at least: their new position does not correspond any longer to that small village near Hamburg.

I am struggling how to keep the two markers at the correct place, when shrinking the URL-window. Any suggestions how to solve would be highly appreciated.

Please find below the CSS/HTML script:

<style type="text/css">

.table1 { 
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-width: 6px; 
    border-style: double;
    font-family: verdana;
    font-style: normal;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}
.td1 { 
    border-width: 6px; 
    border-style: double;
    padding: 5px;
}
.img {
    height: auto;
    width: 100%;
}

#outer-left {
    position:relative;
    z-index:0;
}
#outer-right {
    position:relative;
    z-index:0;
}
.inner-left {
    position:absolute;
    z-index:1;
    bottom: 192px;
    right: 115px;
}
.inner-right {
    position:absolute;
    z-index:1;
    bottom: 250px;
    right: 161px;
}
</style>


<table class="table1">
<tr>
<td class="td1">Niederschlagsradar West-Europa</td>
<td class="td1">Niederschlagsradar Deutschland</td>
</tr>

<tr>
<td id="outer-left" class="td1">
<img src="http://api.buienradar.nl/image/1.0/RadarMapEU?" height="auto" width="100%" >
<div class="inner-left"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

<td id="outer-right" class="td1">
<img src="http://www.niederschlagsradar.de/image.ashx?type=loop1stunde&jaar=&regio=homepage&tijdid=201112050910&time=" style="float: left; filter: alpha(opacity=90); -moz-opacity: .9; opacity: .9; border-width: 0px; height="auto" width="100% " />
<div class="inner-right"><img src="http://mirpir.eu/mark2.gif" alt="Rellingen" /></div>
</td>

</tr>
</table>
<br><br>

Solution

Set the markes position in relative % units, so they keep the same position when you resize the container.

.inner-left {
position:absolute;
z-index:1;
top: 34%;
left: 65%;
}

adjust as needed