www.webdeveloper.com
Results 1 to 4 of 4

Thread: IE Center

  1. #1
    Join Date
    Jan 2005
    Posts
    119

    IE Center

    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..

    HTML Code:
    <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>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <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:
    Code:
    <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??)

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Konqueror 3.x doesn't support Opacity. It's not clear if 4.0 will or not.

    See the comments:
    Code:
      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+ */

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles