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>

[CrotchetTheLeper]

If the status updates are showing up at different "heights" on the browser, you can put an underscore here: _top:155px;

That will tell the browser to only read that in IE. Then you can create another top:??px; without an underscore that will only be read by Firefox. You can figure out where it looks good on FF, and then put that pixel value there. This way, you can have them both in the right spot in each browser.

As for the movement of the extended network; I'm not really sure how to fix this. I tried to put an !important after the position:absolute but that didn't work... Anyone else know?