CSS positioning relative to an element

I am trying to get something to work and am having problems with the
CSS portion of it. Before I forget, the URL is:
http://www.minnesotanortheast.com/new-index.php

Basically, it's to function just like an image map, but using CSS
positioning instead of the MAP and AREA html tags...

I have a JPG of a map with the background that I want to show. On top
of the map, I need to place some label images on it. Because the labels
that are displayed will be chosen by means of a database query, I
cannot simply create the image maps to do this for each combination
(right now, that'd be 144 of them, and they plan to add more later).
Therefore, to do this, I have my php script spit out the necessary HTML
code which would look like this (simplified):

<div id="nemnmap">
<img src="/images/nemn-map.jpg">
<div><img src="cranelake.png"></div>
<div><img src="duluth.png"></div>
<div><img src="ely.png"></div>
</div>

Each div inside the nemnmap element has styles defined like so:
position:absolute; top:?px; left:?px; width:?px; height:?px;

Where "?" is a number (also pulled from a database).

Here's the problem...

I want the nemnmap to have text wrap around it like this:

alskdf alksdjf aiopsdj faasd asdlkf peawirm fa[perijaprgji
alskdf alksdjf aiopsdj faasd asdlkf peawirm fa[perijaprgji
alskdf alksdjf aiopsdj +-------------------------------+
asdfj apsijdg pijapirfg | |
asdfgh4i8yd gwipj58j | This is the map |
asdfj apsijdg pijapirfg | |
+-------------------------------+

So, I defined a margin and to float:right; However, I can't seem to get
the map *and* it's elements in the correct position (except in
Moz/Firefox/MSIE - and the float doesn't even work for them
correctly!). If I use position:absolute, the elements are positioned
correctly, but the map covers the text. Using static or relative allow
the map to appear in the correct position, but the child elements are
absolutely positioned in relation to the body instead of the nemnmap
div element.

Can I even do this so that it works with Mozilla, Firefox, Netscape,
MSIE, Opera and Safari for Mac/PC?

TIA for any help/insight you can offer.

And lo, Justin Koivisto didst speak in alt.www.webmaster:

> I am trying to get something to work and am having problems with the
> CSS portion of it. Before I forget, the URL is:
> http://www.minnesotanortheast.com/new-index.php
>
> Basically, it's to function just like an image map, but using CSS
> positioning instead of the MAP and AREA html tags...

Map's with shape="poly" are a lot more flexible for this sort of thing.

> Because the labels
> that are displayed will be chosen by means of a database query, I
> cannot simply create the image maps to do this for each combination.

That doesn't make sense. Why not dynamically add a label popup with DHTML
to each <area> tag? That will do the same thing. Set a loop to go
through the tags and use each tag's title attribute for the popup text.

Alternatively, to eliminate the need for JS, you can have an imagemap
*and* a layer of labels. I did the same sort of thing with a
pseudo-dialogue I built for the Opera browser:

http://www.greywyvern.com/code/opera/Proposal-DPD.html

> Therefore, to do this, I have my php script spit out the necessary HTML
> code which would look like this (simplified):
>
> <div id="nemnmap">
> <img src="/images/nemn-map.jpg">
> <div><img src="cranelake.png"></div>
> <div><img src="duluth.png"></div>
> <div><img src="ely.png"></div>
> </div>

Image maps look quite similar; there's no reason you can't generate them
from the same database. Then you only have to position an image and can
forget about child elements.

> Here's the problem...

[snip]

I seem to remember having the same sort of problems while building the
dialogue I mentioned earlier. My solution was to absolutely position the
box containing the images and labels, while at the same time floating an
empty box of the same dimensions underneath it to supply the text-wrapping
effect.

The fact that you want to position the map at the *bottom* of the
containing box makes it difficult to use this method since you won't be
able to accurately predict where the empty float will land.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system