Div centering displacement in Opera or IE and FF

[Armor Darks]

Hi all
Here is my trouble:
http://www.myspace.com/blackartofficial

In opera it should look fine, but in FF and IE borders of bottom element and element under menu are displaced. If I will fix it in FF and IE - it will accure in Opera.

here is code of div and ccs:

div.centerholder {
position: absolute;
top: 320px; 
left: 50%;
width: 848px;
margin-left: -424px;
height: 71px;
}

<div class="centerholder">
<img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_centerholder.gif" border="0" />
</div>

As you see, I'm using absolute position due to limitations of myspace. In fact. in other situation I'd prefer not to use absolute position, but at myspace I don't have any choice.

I don't know is it problem of Opera or of FF and IE. Looks like in fact it is problem of IE and FF, becouse background centered properly. Or I've just done something wrong.

I googled many sites, founded different solutions, but they didn't worked. For example use of auto margins (margin-left and margin-right) results in same effect + do not work in IE.

I can only hope that this problem can be solved =(

[Kor]

I see no notable differences between Opera (9.6) and FF (3). The problem is with IE7. In fact the best look is in FF3.

Anyway, I guess you made you code much too intricate. Horizontal centering of a div is rather easy if you use the auto value for the left and right margins.

.containerDiv{
width:848px;
height: 71px;
margin:323px auto 0 auto;
}

On the other hand, another solution could be using that picture as a background and center the background

[Armor Darks]

thanx for reply

it won't work in ie =(

In ie6.

[Armor Darks]

tryed variant with background image. In opera and Mozilla it worked, but in ie6 didn't work as always + if I place img as background, half of div becomes overwrited by another div. And looks like there is no any possiblity to pull it at upper layer.

[Kor]

give your all divs precise size (width and height)

[Armor Darks]

here is all code at myspace:

<style>.MyspaceGens Navigation Bar Generator V2.0 { http://www.myspacegens.com/handler.php?gen=newnavbar } div.profileWidth table td { background-color: black !important; background-image: none !important; } div.profileWidth div ul li a {color: white !important; font-size: 11px !important; font-family: Verdana !important;}div.profileWidth div ul li a:hover, div.profileWidth div ul li .open {color: white !important; font-size: 11px !important; font-family: Verdana !important; background-color: black !important;}div.profileWidth div td.rail { background-color: black !important; } div.profileWidth table td ul small {color: white !important; font-size: 8px !important;}div.profileWidth table tr td div table.rail {background-color: darkred;}</style>
<style> 

table, tr, td{ 
background-color:transparent; 
border-style:none; 
} 

body, body.bodycontent{ 
background-color:rgb(0,0,0); 
background-image:url(http://data.virusman.ru/ax20/devs/ArmorDarks/bwbg4.gif); 
background-position:center center; 
background-repeat:repeat-y; 
background-attachment:fixed; 
margin-top: 150px;
margin-bottom: 14px;
} 

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ 
color:white; 
font-weight:normal; 
font-style:normal; 
text-decoration:none; 
text-transform:none; 
font-family:verdana,sans-serif; 
} 

table, tr, td, li, p, div,.text,.redtext, .blacktext12 { color:ffffff; }
.whitetext12, .orangetext15 { color:ffffff; font-weight:bold; }
.lightbluetext8, .blacktext10, .redbtext,.btext { color:ffffff; }
.nametext { color:ffcc66; font-weight:bold; }

a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{ 
color:rgb(107,1,1); 
font-weight:bold; 
font-style:normal; 
text-decoration:none; 
text-transform:none; 
font-family:verdana,sans-serif; 
} 

div.toplogo {
position: absolute;
top: 0&#37;; 
left: 50%;
width: 800px;
margin-left: -400px;
height: 150px;
}

div.centerholder {
position: absolute;
top: 320px; 
left: 50%;
width: 848px;
margin-left: -424px;
height: 71px;
}

div.bottomholder {
position: fixed;
bottom: 0%; 
left: 50%;
width: 863px;
margin-left: -431px;
height: 51px;
}

a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link { color:ffcc66; font-weight:bold; }
a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover { color:FF6622; }

table table table, div table table{ 
border-color:rgb(255,255,255); 
border-style:none; 
border-width:1px; 
} 

table table table table, div table table table{ 
border-style:none; 
} 

.contactTable { width:300px!important; height:150px!important; padding:0px!important; background-image:url(http://data.virusman.ru/ax20/devs/ArmorDarks/ba_links.png); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px!important;}
.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}
.contactTable .text {font-size:1px!important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;}
.contactTable .whitetext12 {display:none;; }
</style>

<div class="toplogo">
<img src="http://data.virusman.ru/ax20/devs/ArmorDarks/ba_logo_blackgold_large.jpg" border="0" />
</div>
<div class="centerholder">
<img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_centerholder.gif" border="0" />
</div>
<div class="bottomholder">
<img src="http://data.virusman.ru/ax20/devs/ArmorDarks/BA_bottom.gif" border="0" />
</div>