I am using an update progress control which contains an animated gif and then some text below. The style on the DIV creates a box around it. It renders fine in IE6 but IE7 the Please Wait...shows up outside the box...any suggestions? Here is the code and css style:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</ProgressTemplate>
</asp:UpdateProgress>
background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;
If i do the following it works fine, so there has to be more html in the page, that is manipulating something. In any case, why not make the image a background-image on the div with the css, and rmeove the image tag all together, so the image is just part of the div anyway.
<html>
<style>
.wdeProgressIndicator{
background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;
}
</style>
<body>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</body>
</html>
Good suggestion..thanks. That seems to work for now.
