Firefox / IE show different div width Options

[kaje103]

The "main" div is set to a width of 568 and shows up level with the header image in IE7 but in Firefox it overlaps a few pixels. Changing the width to look correct in one browser makes it look wrong in the other. Any suggestions?

http://www.myspace.com/kwjohns

About me:

CODE

<style type="text/css">
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,p,xmp,table,tr,td,th{
background-image: url(http://pages.suddenlink.net/kwjohns/myspace/23169ab.gif);
background-repeat: repeat-x;
background-color: 000000;
background-attachment: fixed;
font-family: arial;
font-size:9pt;
color: 6F6F6F;
border: none;}

b {
font-family:                    Trebuchet MS, Times New Roman;
color:                          90AF1B;
font-weight:                    bold;
text-transform:                 none;}

u {
font-family:                    Trebuchet MS, Times New Roman;
color:                          6F6F6F;
font-weight:                    bold;
text-transform:                 none;
}

i {
font-family:                    Trebuchet MS, Times New Roman;
font-weight:                    bold;
color:                          6F6F6F;
font-style:                     italic;
text-transform:                 none;}

h1 {
    margin:1;
    padding:0;
    font-family:Trebuchet MS;
        color:ffffff;
    font-size:13pt;
        font-weight:none;
    line-height:15pt;
    text-transform:uppercase;
    background-color:90AF1B;
        display: block;
        
}

.bannertext {
font-family: arial;
font-weight: bold;
letter-spacing: -1px;
color: 000000;
text-align: justify
line-height: 12px;
      
}

input, textarea {
font-family: courier new;
font-size:12pt;
text-align:justify;
color:ffffff;
border-color:000000;
border-style: solid;
border-width: 1px;
background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png);

}

a:link{color: ffffff; text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:visited{color:ffffff; text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:active{color:ffffff;text-decoration:none;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
a:hover {color:000000;font-size:11px !important;font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}


span, table, td, text,div, tr,a,p{font-size:12px !important;color:6F6F6F; font-family:
Trebuchet MS, Times New Roman;line-height:8pt;}
div table td font {visibility:hidden;}
div table table td font a {visibility:visible;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
div td td font {display:none;}

form {display:none;}
table table table form {display:inline;}
.a {hide bottom links div}
table div {display:none;}
table table div {display:block;}
td {height:0px;}


div table div {display:block;}
table, tr, td {background-color:transparent;}
.navigationBar {display:none;}
body div table tbody tr td font {visibility:hidden;}
body table div table tbody tr td font {visibility:visible;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}

body div td div div select {position:absolute!important;top:-1000px;}
body div div form {display:none !important;}
table table div form {display:inline !important;}
</style>


<div class="main" style="position: absolute; left:250; top:180; width:568; height:567; overflow: hidden;">
<img src="http://pages.suddenlink.net/kwjohns/myspace/23169aa.png" USEMAP="#nav" BORDER=0>
<map name="nav">
  <area name="Home" shape="rect" coords="8,4,85,21" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbQ=="  alt="Home">
  <area name="Message" shape="rect" coords="94,5,174,22" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD00MTgyNzU3Jk15VG9rZW49MGVhM2IyMGItZTJiNS00YTAyLThiYTMtMTdjMzZmM
M3ZTFm"  alt="Message me">
  <area name="Pictures" shape="rect" coords="185,3,260,20" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD00MTgyNzU3"  alt="View pictures">
  <area name="Add" shape="rect" coords="268,3,345,23" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTQxODI3NTc="  alt="Add me">
</map>
</div>


<div class="bannertext" style="position: absolute; left:480; top:230; overflow: hidden;width:200; height:100; ">
<font size="4"></font>
</div>

I'd like to meet:

CODE

<style type="text/css">
    table, tr, td {background:transparent;}
    table table table table, table table table table td.text, table.contactTable {display:none;}
    td.text table, .orangetext15 {visibility:hidden;}
    td.text table table {display:inline; visibility:visible;}
    td.text td.text table {display:none;}
    div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}

</style>


<div class="content" style="position: absolute; left:255px;  top:280px; width:560px;height:530px;overflow: auto;background-color:212121;padding-left:10px;padding-top:10px;">


<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD1YWFg="><img src="http://i4.tinypic.com/80vol5l.gif"align="left"></a>
Profile Here

<br/><br/><br/><br/>
test
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h1>Friends;</h1>
<center>
<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>

<A HREF="FRIEND URL"><img src="http://i17.tinypic.com/6kfzo93.gif"border="1"color="000000"></A>
</center>

<br/><br/>
<h1>Comment;</h1>
<center>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="XXX FRIEND ID HERE" type="hidden"><textarea name="f_comments" col; style="color:ffffff; text-align:center; font-family: courier new; font-size: 12px; height:100px; width:300px; border: 1px solid black; background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png)">Leave comments.</textarea><br /><input type="submit"value="Send" style="color:ffffff; text-align:center; font-family: courier new; font-size: 12px;border: 1px solid black; background-image:url(http://pages.suddenlink.net/kwjohns/myspace/23169ac.png);"><br></center>

</div>

[kaje103]

I've gotten a little further with it. I found this patch of code that can be used to position it:

CODE

<style>
table.extendedNetwork {display:block !important;
visibility:visible !important;
position:absolute; top:155px; left:50%; margin-left:-60px;
z-index:5;}
</style>

However, with the position being set to absolute, it stays put in IE but will still move based on the size of the browser's window in Firefox. Also, for some reason in Firefox is appears higher up than it does in IE. I'd also like the status to be left aligned but text-align: left didn't do the trick.