i am trying to make my site compatible with browsers other than IE [mostly Mozilla] and i am having problems with the DIVs on my site.. they each hold an iframe and are absolute positioned to fit over their designated boxes in my background image.. but when i look at my site in Mozilla they are not positioned correctly.. they're off.

the site is: www.geocities.com/salomeyasobko [or http://salomeya.tk]

<div align="center" style="position: relative; top: 20px;">

<div style="overflow: hidden; position: relative; top: 0px; left: 0px;">
<img src="http://img.photobucket.com/albums/v84/salomeyasobko/tobey1234.gif">
</div>

<div align="center" style="position: absolute; top: 52px; left: 390px;">
<iframe src="nav.html" style="overflow-x: hidden; overflow-y: auto;" name="nav" height="455px" width="220px" frameborder="0">
</iframe></div>

<div align="center" style="position: absolute; top: 52px; left: 614px;">
<iframe src="http://salomeya.pitas.com" name="content" height="455px" width="355px" frameborder="0">
</iframe></div>
</div>


EDIT: also, i used the &nbsp thing to add a space between the little heart images and the text in the navigation area and, rather than showing the space, it shows the "&nbsp" so.. is there any alternative to using the &nbsp that will work in mozilla and IE? thanks :D

try &nbsp; instead of just &nbsp

Does it happen in other browsers (Opera, Netscape) too? (I'd test, but I'm not on my own computer.) Perhaps using Tantek Çelik's Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html) in your CSS, to feed the appropriate values to IE but still keep the ones necessary for other browsers.

The other thing that might work is to put this in your main div, the one relatively positioned 20px from the top:
<div style="position: relative; top: 20px; left: 10px !important; left: 0;">
The !important thing makes the first value stay in most (not all) current browsers, except for IE, who takes left: 0 as the div's position.

it looked ok on my mozilla and firefox.
800x600 res.
just the tagboard on the right was wider than your border lines.

anyways... you seem to have two absolute positioned items inside a relative positioned item. the absolute ones will break out of the relative area and do their own thing, so perhaps make all of them absolute positioned and toast the outer relative div.

and yeah, as the first reply states... you are missing the ; after the nbsp parts.

thanks for all the replies! i will try it all! :)

@pb&j- the thing is, i need that relative positioned DIV because it keeps my background image centered.. i wanted to make my whole page centered [in all resolutions] but then i needed to position those DIVs a certain number of pixels from the left side of the page to make them fit in their appropriate spots in the background image.. so wouldn't taking out the relative positioning mess that up? i'm rather confused about how i can get this to work :(

thanks! =)