CSS Village Map: browser incompatible. help!

[Karyll]

Hello to everyone. I am quite new to CSS and dont know much about the "deep" things involved whenusing divs. Now, since wveryone that posts here has some kind of problem they want to get solved, here's mine:

I'm trying to make a map of a fantasy village using transparent gif's. I have managed to do make this work in Opera, but it breaks mizerably in Firefox (and we don't want that to happen....don't we? :D ) (please see the two attached images for a better undestanding of my problem)

the code i'm using is this:


<div class="background">
<img src="images/map/background.jpg">

<div class="house">
<img src='images/map/house.gif' width='64' height='81'>
</div>
<div class="mountain1">
<img src='images/map/mountain1.gif' width='98' height='68'>
</div>

<div class="trees11">
<img src='images/map/trees1.gif'>
</div>

<div class="trees12">
<img src='images/map/trees1.gif'>
</div>


.................... ..........................................
.....and so on for other map elements...................
.................................................
</div>



and the CSS



<style type="text/css">
<!--


.background {
position:relative;
width:96px;
height:96px;
left:0;
top:0;
z-index:1 }


.house {
float:left;
position:absolute;
width:64px;
height:81px;
left:30;
top:45;
z-index:2 }

.chapel {
position:absolute;
width:96px;
height:96px;
left:65;
top:224;
z-index:23 }

.chapel_sign {
position:absolute;
width:96px;
height:96px;
left:90;
top:250;
z-index:23 }

.blacksmith {
position:absolute;
width:96px;
height:96px;
left:340;
top:200;
z-index:24 }

.blacksmith_sign {
position:absolute;
width:96px;
height:96px;
left:346;
top:200;
z-index:24 }

.mountain1 {
position:absolute;
width:96px;
height:96px;
left:320;
top:30;
z-index:2 }

.trees11 {
position:absolute;
width:96px;
height:96px;
left:175;
top:250;
z-index:3 }

.trees12 {
position:absolute;
width:96px;
height:96px;
left:295;
top:50;
z-index:4 }

.trees21 {
position:absolute;
width:96px;
height:96px;
left:305;
top:240;
z-index:5 }

.trees22 {
position:absolute;
width:96px;
height:96px;
left:25;
top:100;
z-index:6 }

.crack1 {
position:absolute;
width:96px;
height:96px;
left:268;
top:310;
z-index:7 }

.flowers11 {
position:absolute;
width:96px;
height:96px;
left:90;
top:30;
z-index:8 }
.flowers12 {
position:absolute;
width:96px;
height:96px;
left:268;
top:140;
z-index:9 }

.trees3 {
position:absolute;
width:96px;
height:96px;
left:168;
top:90;
z-index:10 }

.infobox {
position:relative;

z-index:50;
left:0px;
top:0px;
}


//-->
</style>


i also want the map to appear centered (obviously). I would be really greatful if you could tell me what to do in order to fix this. If you have any other alteratives please tell me. i just want this fixed in any way possible.

Thanks.

[_Aerospace_Eng_]

Great no images, yeah we know exactly what your images look like and where they are located. Attach your images or give us a link to your page.

[Karyll]

the images are attached

Attached Images
map_firefox.jpg (45.2 KB, 0 views)
map_opera.jpg (49.2 KB, 0 views)

doh...

the link to the page is katabaza.rgbdesigners.com but you will have to signup and login and bla..bla.. and i bet you dont want to go throught that.
in any case, i have uploaded the images at:
http://katabaza.rgbdesigners.com/map_opera.jpg
http://katabaza.rgbdesigners.com/map_firefox.jpg

[_Aerospace_Eng_]

Not those images the ACTUAL images you are using in your html.

[Karyll]

http://katabaza.rgbdesigners.com/images/map/
sorry, i misunderstood .

[Graft-Creative]

Not had much time to look at this yet, but could it be that Firefox expects units on values, i.e.


top: 130px;
left: 300px;


Whereas Opera might assume that if units are undefined, then it must mean pixels?

Try adding px to all your positiong, worth a try.

Gary