let's say i have fallowing html-
<div id="submitPage" align="center" >
<div id="middlecontainer">
<p align="center" id="loading-image"> <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.
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;
}