• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 792
  • Last Modified:

trying to create a div that cover the whole page, but it doenst work with IE6, any suggestions?

I am trying to create a div  that has the following properties but it doesnt work in IE6. It only works with IE7.

  <div style="position: absolute; width: 100%; height: 100%; background-color: Black;" class="modalBackground"></div>

Basically the div is supposed to cover the entire page area but so far it only works with IE7. Any suggestions?

0
Carl2006
Asked:
Carl2006
  • 3
  • 3
  • 2
1 Solution
 
kevp75Commented:
try putting:
<style type="text/css">
html, body {
height:100%;
width:100%;
}
</style>

in your <head> tags
0
 
kevp75Commented:
you will also probably need to add in:

padding:0;
margin:0;

to that bit of CSS

http://support.getmysupport.com/temp.asp

you also probably won't need that position:absolute; on the div once you do this...
0
 
DigitalTyrantCommented:
What is the CSS in class modalBackground?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Carl2006Author Commented:
       <div id="ctl00_UpdateProgress1" style="display:none;">
      
                <div style="position: absolute; width: 100%; height: 100%; background-color: Black; padding: 0; margin: 0;" class="modalBackground">
                </div>
                <div style="position: absolute; left: 50%; top: 30%; margin-left: -150px; margin-top: -30px; border-collapse: collapse; padding: 0; margin: 0;" align="center">
                    <table border="1" cellspacing="0" cellpadding="0" style="border-color: Navy; border-style: solid">
                        <tr>
                            <td>
                                <table id="Table2" height="60px" bgcolor="white" border="0" cellpadding="0" cellspacing="0" bordercolor="white" width="300px">
                                    <tr height="50px">
                                        <td align="center" class="VerdanaXSmallBlue">
                                            <img src="images/Gif/indicator.gif" alt="Please Wait.." />
                                            Please Wait......
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
           
</div>



.modalBackground
{
    filter: alpha(opacity=60);
   
}
0
 
Carl2006Author Commented:
kevp75:
just included padding: 0; margin: 0;.. still no luck
0
 
Carl2006Author Commented:
kevp75:

i think it works after i included the css..


Thanks
0
 
kevp75Commented:
any time.  the key things here are the containing elements.  If the page doesn't know that it is supposed to be 100% wide & high, none of the child elements will know either.

few things I usually do when building a site:
* {
margin:0;
padding:0;
}
html, body {
height:100%;
width:100%;
}

this will make everything in between <html> and <body> tags 100% wide & high, and make everything have 0 padding & margin

GLTY
0
 
DigitalTyrantCommented:
If it is still not working completely, try this:

.modalBackground
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:200;
  background-color:#000;
  -moz-opacity: 0.7;
  opacity:.70;
  filter: alpha(opacity=70);
}
and move

<div class="modalBackground">
</div>

to just inside the body tag.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now