Excellent, that you for the quick feedback.
Back to the map box now.
The current test page already had code on it, some of which used to exist on the Kyoto page, too, but was deleted because it interfered with the map box or was otherwise not needed.
When you copied the “clean” code from the Kyoto page it was added to the “dirty” code on the current page. You did not delete the “dirty” code first. It’s that simple and that complicated.
I am referring to my code on the current page as band-aid code because it has to work around or in spite of the “dirty” code. I would like for you to clean out the “dirty” code from the current page and all future pages. If it were not for the preexisting “dirty” code, the Kyoto code would work beautifully.
I have prepared some screen shots of Firebug that will show the difference.
The map container consists of 4 objects:
<div class="map">
<a href="MapKyoto.html" target="_blank">
<div class="img-container">
<img width="300" height="165" src="images/MapKyoto.jpg" alt="">
The code for the outer div “map”, the anchor, and the div .img-container is the same on both pages; HOWEVER, the code for the img is very different. You will see in the Firebug screen shots.
On the left side of each panel is the HTML, the CSS is on the right side
The HTML and CSS are the same for the outer 3 containers, but the CSS for the img is different (which is why certain pieces of it were deleted from the Kyoto page).
I suggest that you download both images so you can look at them in your browser or graphics program side-by-side or switch between them in browser tabs.
The first screenshot is of each of the 4 ojects making up the map box in the Kyoto page:
If the CSS in the bottom file looked like the CSS in the Kyoto file, there wouln’t be any problems, but it doesn’t, does it. Do you see those selectors with the double IDs, one of which is uselessly in a media query. The point is that unnecessary or poorly targeted CSS is a handicap to writing a complex page (or site!)
I hope this is meaningful to you.