Any specific code to make DIV layouts work in firefox? Options

[maravillax]

Hi! My question is if there's some specific code to use to make a layout work fine in firefox? 'cuz this one that I'm making it seems to be normal when I view it on IE. but when I view it on firefox it's all mess up.

here's the code that I'm using

CODE

<style type="text/css">
body{background-color:CDCAC5;
body{background-image: url('http://i60.photobucket.com/albums/h12/Maravillax/pilirock-back-1.jpg')background-reapeat:yes-repeat;border-color:000000;border-width:8px;border-style:solid;scrollbar-face-color:CDCAC5;scrollbar-3dlight-color:000000;scrollbar-shadow-color:000000;scrollbar-track-color:CDCAC5;scrollbar-darkshadow-color:CDCAC5;scrollbar-arrow-color:000000;scrollbar-highlight-color:CDCAC5;}
div div select, div div form {display:none !important;}
select { filter:alpha(opacity=0); }
.ftd {Moves the entire profile up - hey hey hey goodbye}
body table {margin-top:-50000px;}

.ftd {Keeps the ad, search form, and navigation links in place}
body td table, body div table {margin-top: 0;}

.ftd {Makes the table the ad, search form and nav links are on transparent}
table, tr, td {background-color:transparent;}

.ftd {Removes the search form}
body div table form{display:none;}

.ftd {For comment boxes to display}
body table div form{display:block;}

.ftd {Hides the dividers in between the nav links}
div table td font {visibility:hidden; }

a.navbar:active, a.navbar:visited, a.navbar:link { color:808080; }
a.navbar:hover { color:000000; }

.navbar {visibility:visible !important;}


</style>

















<div style="pilirock" style="position: absolute; left:100px; top:75px; width:821px; height:978px; overflow:hidden;">

<p><map name="FPMap0">
<area href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" shape="rect" coords="130, 479, 174, 501">
<area href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0xOTYzODA3NDc=" shape="rect" coords="179, 481, 229, 501">
<area href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0xOTYzODA3NDcmTXlUb2tl
j0zNWE2NDcyNy1lYjYyLTQ1NzItYTFhMy04Mjc4ZWZkMjU5NzM=" shape="rect" coords="238, 479, 300, 502">
<area href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD0xOTYzODA3NDcmTXlUb2tlbj0zNWE2
DcyNy1lYjYyLTQ1NzItYTFhMy04Mjc4ZWZkMjU5NzM=" shape="rect" coords="304, 477, 415, 502">
<area href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzJmZyaWVuZElEPTE5NjM4MDc0Nw==" shape="rect" coords="426, 479, 513, 501">
<area href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTE5NjM4MDc0NyZN
VRva2VuPTM1YTY0NzI3LWViNjItNDU3Mi1hMWEzLTgyNzhlZmQyNTk3Mw==" shape="rect" coords="522, 479, 620, 500">
<area href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTE5NjM4MDc0Nw==" shape="rect" coords="631, 478, 693, 503">
</map>
<img border="0" src="http://i60.photobucket.com/albums/h12/Maravillax/alex-space-1.jpg" usemap="#FPMap0" width="821" height="978"></p>
  <div style="position: absolute; left: 124px; top: 531px; width: 345px; height: 400px; z-index: 1; overflow:auto;scrollbar-face-color:AEACAD;scrollbar-3dlight-color:000000;scrollbar-shadow-color:000000;scrollbar-track-color:AEACAD;scrollbar-darkshadow-color:AEACAD;scrollbar-arrow-color:000000;scrollbar-highlight-color:AEACAD; id="layer4">
    <div align="left">
<font size="1" face="Century Gothic"><b>Name: </b>Alexander</font></div>
    <div align="left">
<font size="1" face="Century Gothic"><b>Age: </b>24</font></div>
    <div align="left">
<font size="1" face="Century Gothic"><b>Status: </b>Single</font></div>
    <div align="left">
<font size="1" face="Century Gothic"><b>Zodiac:</b> Leo</font></div>
    <div align="left">
<font size="1" face="Century Gothic"><b>Location:</b> NYC</font></div>
    <div align="left">
<b></b><font size="1" face="Century Gothic"><b>HomeTown: </b>Santiago, Dom. Rep</font></div>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"> </p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"><b>
    <font size="1" face="Century Gothic">About Me:</font></b></p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px">
    <font size="1" face="Century Gothic">Blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah  blah  blah blah blah blah blah bla blah blah
    blah blah bl;ah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah  blah  blah blah blah blah blah bla blah blah
    blah blah bl;ah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah  blah  blah blah blah blah blah bla blah blah
    blah blah bl;ah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah </font></p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"> </p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"><b>
    <font face="Century Gothic" size="1">Music</font></b></p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"> </p>
    <p align="left" style="margin-top: -2px; margin-bottom: -2px"> 
    <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="144" width="175" id="radioblog_player_2" align="center" data="http://stat.radioblogclub.com/radio.blog/skins/default/player.swf">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://stat.radioblogclub.com/radio.blog/skins/default/player.swf" />
  <param name="bgcolor" value="#999999" />
  <param name="flashvars" value="id=2&playlistPath=http://maravilla.dontexist.com/radio/playlist.xml&cover=0&colors=body:#999999;border:#000000;button:#CCCCCC;player_text:#000000;playlist_text:#000000;&title=Stronger" />
</object></p>
    </div>

<div style="position: absolute; left: 475px; top: 535px; width: 231px; height: 402px; z-index: 2" id="layer1">
  <p align="center"><b><font size="1" face="Century Gothic">My Friends</font></b></div>

[tokyo-rose]

No, there's no one code that you can use to make layouts both IE- and FF-compatible since FF reads CSS/HTML differently than IE does. =/

[maravillax]

No, there's no one code that you can use to make layouts both IE- and FF-compatible since FF reads CSS/HTML differently than IE does. =/

But why other layouts work on both browsers? cuz before I post this thread I look few of the layouts of CB and they look the same in both browsers.

[pandora]

there's no code that magically makes things work in firefox. you just have to be cross-browser portability conscious.

if you code correctly you shouldnt have a problem.

[maravillax]

Ok, I found the problem and fixed it. Still see two gaps. hope not many firefox users view my brother profile..lol
Thanks for all your help