Centering being weird. Options

[dyindyinjohnson]

With the layout I'm doing, in FF its centered [the rollover links] but in IE, it's way to the left. (Like over 200px)

[Mikeplyts]

Here, try replacing your codes with this:

CODE

<style>
.Main{position:absolute; left:50%; margin-left:-###px;
top:100px; width:800px; z-index:1;
margin-left:-400px; padding:0px;
border:2px black; background-FFFFFF;}
</style>
</span>


<td valign="top" align="left" width="400" bgcolor="0d0b0b" style="word-wrap: break-word">
<span class="orangetext15">
</span>
<br />
<span class="text"><div class="Main">
<table style="width:800px; height:100px; border:0px solid silver; background-color:FFFFFF;"
cellpadding="0" cellspacing="0"> <tr> <td valign="top">



<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
float:left;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
float:left;
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
float:left;
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}

a.pictures{
float:left;
height:50px;
width:160px;
overflow: hidden;
background-image: url("http://img6.imageshack.us/img6/4332/pictures2.png");
background-position:center;
background-repeat: no-repeat;
}

a.pictures:hover{
background-image: url("http://img24.imageshack.us/img24/4041/picturesc.png");
background-position:center;
background-repeat: no-repeat;
}

a.add{
float:left;
height:50px;
width:79px;
overflow: hidden;
background-image: url("http://img269.imageshack.us/img269/4821/add2i.png");
background-position:center;
background-repeat: no-repeat;
}

a.add:hover{
background-image: url("http://img24.imageshack.us/img24/9950/addsvj.png");
background-position:center;
background-repeat: no-repeat;
}

a.block{
float:left;
height:50px;
width:108px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2116/block2.png");
background-position:center;
background-repeat: no-repeat;
}

a.block:hover{
background-image: url("http://img24.imageshack.us/img24/2118/blockdos.png");
background-position:center;
background-repeat: no-repeat;
}
</style>


<div style="position:absolute; top:40px; _top:50px; left:50%; _left:50%; margin-left:-380px; _margin-left:-250px;width:900px;">
<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=
XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX" class="pictures"></a>
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_confirm&statusCD=1&friendId=XXXXXXXX" class="add"></a>
<a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockuser&userID=XXXXXXXX" class="block"></a>
</div>



<img src="http://img32.imageshack.us/img32/3334/zunelayout.png"
width="984" border="0" usemap="#imap_78" >
<map id="imap_78" name="imap_78" >
<area shape="rect" coords="579,246,595,327" alt="" title="" href="http://www.myspace.com/dyindyinjohnson">
</map>


<div style="position:absolute; top:470px; left:50%; margin-left:-###px; overflow:auto; width:620px; height:130px; color:000000; font-size:10px; margin-top:1px; cursor:default; font-weight:normal; letter-spacing:1px; font-family:tahoma; text-decoration:none; text-transform:none; background-color:clear; border:0px solid;">
<center>
Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here. Replace all the XXXXXXXX's with your Friend I.D. Then write your "About Me" here.
</center>
</div>


<style>
{Background Properties}
table, tr, td { background-color:FFFFFF;
border:none; border-width:0;}
body {background-color:FFFFFF}
.mygen { Table Properties }
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:0px;
border-color:FFFFFF;
background-color:FFFFFF;}

.mygen { Text Properties }
table, tr, td, li, p, div {font-family:arial; color:FFFFFF; font-size:12px;}
.btext {color:FFFFFF;}
.blacktext10 {color:FFFFFF;}
.blacktext12 {color:FFFFFF;}
.lightbluetext8 {color:FFFFFF;}
.orangetext15 {color:FFFFFF;}
.redtext {color:000000;}
.redbtext {color:000000;}
.text {color:000000;}
.whitetext12 {color:000000;}
a:active, a:visited, a:link {font-family:tahoma; color:FFFFFF;
font-size:12px;font-weight:normal;}
a:hover {font-family:arial; color:FFFFFF; font-size:10px;}
a.navbar:active, a.navbar:visited, a.navbar:link {color:000000;}
a.navbar:hover {color:000000;}
a.redlink:active, a.redlink:visited, a.redlink:link {color:000000;}
a.redlink:hover {color:CCCCCC;}
.nametext {color:000000;}
</style>
</div>



</td> </tr> </table> </div>
<div class="comt"><table><table>

<div style="position:relative; height:0px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>

<style>
.friendsComments {display:none;}
</style>

<style type="text/css">.friendSpace { display:none; }</style>

<style type="text/css">.userProfileDetail {display:none;}</style>

<br />
<style>.interestsanddetails{display:none;}</style>
<p>

<style type="text/css">div table td font {display: none;}</style>

<style>div div table div, div.clearfix a, input {display:none;}
div.clearfix table div div {display:block;}</style>

<style type="text/css">

.a {hide top search bar}
div div select, div div form {display:none !important;}
</style>

<style>
div#header, div#googlebar, div#topnav {background:000000;}
div#topnav ul {border-right:none;}
div#topnav ul li {border-left:none;}
div#topnav ul li a:hover, div#topnav ul#leftNav li a#nav2.open:hover,
div#topnav ul#leftNav li a.open:hover, div#topnav ul#leftNav li a.open:hover,
div#subnav ul#subNav3 li a:hover, div#subnav ul#subNav4 li a:hover,
div#subnav ul#subNav10 li a:hover, div#subnav ul#subNav2 li a:hover
{background-color:#000000; color:#000000;}
</style>

Replace the pound signs with the appropriate values. See if that works. (Note - to center it, just replace the pound symbols with half the width of the DIV.)