[Solved] Trying to center a DIV for IE6,7 and Firefox

Hi,

I'm recently new to CSS, at least what formating layouts is concerned. At this moment I'm trying to make a site that will ask the use of CSS for layout.

The site is temporarly in http://www.knowatedge.com/albergue

I have a DIV tag that houses a layout slices made in fireworks. For now I'm only trying to center it on the browser but I get stucked with the differences between IE and Firefox (I use mostly the last one).

I tried to use this solution:
body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

but it doesn't work.

I made some experiments, and the result is this:

For Mozilla:
body {
background-image: url(images/fundo.gif);
text-align: center;
}
#apDiv1 {
width: 815px;
height: 945px;
margin: 0 auto;
top: 0px;
left: 0px;
z-index: 1;
}

For IE7:
body {
background-image: url(images/fundo.gif);
text-align: center;
}
div#apDiv1 {
position: absolute;
visibility: visible;
z-index: 1;
left: 0px;
top: 0px;
width: 100%;
text-align: center;
margin:0 auto;
}

I don't want to make two versions of the site, one for IE and other for FF.

Do you know of a way to bond these two codes, so that one version works for both browsers?

You can see both version by going to these adresses:
http://www.knowatedge.com/albergue/indexie.html -->For IE
http://www.knowatedge.com/albergue/indexff.html -->For FF

For both, CSS code was validated!

Thanks for your time!