Floating div at center doesn't work in IE

let's say i have fallowing html-

    <div  id="submitPage" align="center" >
<div id="middlecontainer">
<p align="center" id="loading-image">&nbsp;<img  src="/cso/images/loading.gif" border="0" > <font color="red" >Submiting order...</font></p>
</div>
</div>

i am trying to float submitPage div at center of page...i ahve used fallowing css and it's working fine in Mozila but don't know why it's not working in IE-8..

#submitPage {
 border: 1px solid black;
 width: 746px;
 height:201px;
 background: aqua; 
 text-align: center;
 z-index: 99;
 position: fixed;
 display: block;
 margin:90px auto;
}
#middlecontainer{
 text-align: center;
 width: 91px;
margin: 0 327px;
}
#loading-image {
  position: absolute;
  top: 74px;
  left: 299px;
  z-index: 100;
}

Please let me now if i am doing something wrong or missing something which needs to be added for IE.Any way to doing it by using Jquery will also be appreciated.

Mozila Screen Shot 开发者_运维百科

Thanks.!

---

Excuse me for saying so, but... what a mess. Mixing HTML attributes and CSS, centering, centering and centering. And centering. And font tags. And centering...

You should avoid to specify centered text for an element that contains block elements, because IE handles that incorrectly and applies the centering on block elements, not only the text.

As you are just placing some text and an image in an element, you only need the element, the image, and the text:

<div  id="submitPage">
  <img src="/cso/images/loading.gif" alt="">Submitting order...
</div>

#submitPage {
  border: 1px solid black;
  width: 746px;
  height: 201px;
  background: #0ff; 
  z-index: 99;
  position: fixed;
  left: 50%;
  top: 90px;
  margin-left: -373px;
  line-height: 201px;
  text-align: center;
  color: #f00;
}
#submitPage img{
  margin-right: 10px;
  border: none;
}

Demo: http://jsfiddle.net/pkMqM/

---

Note: please optimize your CSS too, color:red has been deprecated ;

see the DEMO below

http://jsfiddle.net/2GmC4/