IE Center

[ripcurlksm]

I have a login box that dims the screen and shows a login box dead center of the screen. The login box opens great in FF but it is a little off center in IE. Can anyone make a suggestion? Its pretty close..

Try it for yourself..

<style>
.fade_out
{
   backgroundimage: black;
   background-image:url(fade-bg.gif);
   opacity: 0.6; /* forgot which browser this is */
   -moz-opacity: 0.6; /* for gecko based browsers */
   filter: alpha(opacity=60); /* ie's filter system */
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
   position: absolute; /* you need this for z-index to actually work */
   z-index: 2; /* shove this puppy above the other elements */
}
 
.highlighted_element
{
   z-index: 3; /* Shove this puppy above the faded layer */
   position: absolute;
   top:25%;
   right:25%;
   bottom:25%;
   left:25%;
   /* Position your login box here maybe fluid percentages? */
}
.box
{ 
	float:right;
}
</style>

<script>
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
   browserType= "gecko"
}

function hide() {
  if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("loginShade")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("loginShade")');
  else
     document.poppedLayer =   
        eval('document.layers["loginShade"]');
  document.poppedLayer.style.visibility = "hidden";
  
  
  if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("loginBox")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("loginBox")');
  else
     document.poppedLayer =   
        eval('document.layers["loginBox"]');
  document.poppedLayer.style.visibility = "hidden";
}

function show() {
  if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("loginShade")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("loginShade")');
  else
     document.poppedLayer = 
         eval('document.layers["loginShade"]');
  document.poppedLayer.style.visibility = "visible";
  
  
   if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("loginBox")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("loginBox")');
  else
     document.poppedLayer = 
         eval('document.layers["loginBox"]');
  document.poppedLayer.style.visibility = "visible";
}
</script>

<div style="visibility: hidden" id="loginBox" class="highlighted_element">
<p> <p> <p><p><p>
<table width="350" height="175" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td><table width="219" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
      <tr>
        <td colspan="2"><div class="box">
            <div align="right"><a href="#" onClick="hide()">Hide</a> </div>
        </div></td>
      </tr>
      <tr>
        <td>user: </td>
        <td><input type="text" name="textfield2"></td>
      </tr>
      <tr>
        <td>pass:</td>
        <td><input type="text" name="textfield"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input type="submit" name="Submit" value="Submit"></td>
      </tr>
    </table></td>
  </tr>
</table>
</div>
<div style="visibility: hidden" id="loginShade" class="fade_out">


</div>
<table width="757" height="341" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr bgcolor="#006633">
    <td width="542" height="10">&nbsp; </td>
    <td width="215" height="10" valign="top"> </td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#00FF99"><p>Welcome</p>
    <p>Blah Blah blah</p></td>
    <td valign="top" bgcolor="#00CA79"><a href="#" onClick="show()">Login</a></td>
  </tr>
</table>

[Fang]

You say, "Its pretty close..", which means you are in standards mode. The difference you are seeing is the width reserved for the scrollbar. make you page long enough to have a scrollbar , then the popup will be centered.

[WebJoel]

<style>
.fade_out
{
backgroundimage: black;
background-image:url(fade-bg.gif);
opacity: 0.6; /* forgot which browser this is */
-moz-opacity: 0.6; /* for gecko based browsers */
filter: alpha(opacity=60); /* ie's filter system */
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: absolute; /* you need this for z-index to actually work */
z-index: 2; /* shove this puppy above the other elements */
}....

Invalid. You mean background-color:black;

Could be condensed to:

<style>
.fade_out
{
      background: black url(fade-bg.gif);....

Add this, for Safari, Konqueror, OmniWeb, etc...

opacity: 0.6; /* forgot which browser this is */
-moz-opacity: 0.6; /* for gecko based browsers */
filter: alpha(opacity=60); /* ie's filter system */
-khtml-opacity: 0.6; } /* Safari, Konqueror, OmniWeb, etc.*/

opacity: 0.6; is for OPERA (I think??)

[Kravvitz]

Konqueror 3.x doesn't support Opacity. It's not clear if 4.0 will or not.

See the comments:

  filter:alpha(opacity=60); /* IE5.5+ */
  -moz-opacity:0.6; /* Gecko browsers including Netscape 6+ and Firefox */
  -khtml-opacity: 0.6; /* Safari 1.1-1.3 */
  opacity: 0.6; /* Netscape 7.2+, Firefox, Safari 2+, Opera 9+ */