[SOLVED] Fixed Attribute

[mark110384]

I have a DIV that is hidden until the user selects. It consists of two primary tables. The first table acts as a background and blocks covers the whole page while the second the table is the login that appears in the middle of the page. I have managed to make the first table the size of the whole page by using JS to compensate for MSIE being totally crap (IE wont expand to the botom of the page, and leaves a white gap when the user scrolls down) However I would like to make the login box move when the user scrolls up and down the page, I tried using the Fixed position and it works in Firefox very well but it doesn't work in IE. Does anyone know of a work around to this problem. My coding is as follows.

 

#loginbox 
{


position: absolute;
width: 100%;
top: 0px;
left: 0px;
visibility: hidden;






}
// Background that covers the whole page
.tint 
{ 
position: fixed; 
filter:alpha(opacity=55); 
opacity:.55; 
width: 100%; 
height: 100%; 
min-height: 100%; 
margin: 0px; 
background-color:#63A5E1;

}
// Class for the login box that appears in the centre works in Firefox but not in IE		
.logintable 
{ 
position: fixed; 
width: 30%; 
height: 200; 
top: 15%;
left: 35%; 
background-color:#666666; 
}

 

And the loginbox Div

 

  <table class="tint">
    <tr> 
      <td width></td>
    </tr>
  </table>
  <form method="post" action="http://www.lilleyandgillie.co.uk/cms/login.php" onKeyUp="highlight(event)" onClick="highlight(event)">
<table class="logintable">
      <tr> 
        <td height="169"> 		
	<table width="100%" border="0" cellspacing="3" cellpadding="3" bgcolor="#FFFFFF">
            <tr> 
              <td></td>
              <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="90%"><font face="Lucida sans" size="2"><b>Chart 
                      Management Services Login</b></font></td>
                    <td width="10%"><a href="javascript://" onMouseUp= "close_it()"><img src="../images/closebutton.JPG" border="0"/></a></td>
                  </tr>
                </table></td>
            </tr>
            <tr> 
              <td></td>
              <td height="74"><table width="98%" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="30%"><font face="lucida sans" size="2">User Name:</font></td>
                    <td width="70%"><input type="text" id="username" name="username" style="width:80%" class="textInput"></td>
                  </tr>
                  <tr> 
                  <tr> 
                    <td height="5"></td>
                  </tr>
                  <td><font face="lucida sans" size="2">Password:</font></td>
                  <td><input type="password" id="password" name="password" style="width:80%" class="textInput"></td>
                  </tr>
                </table></td>
            </tr>
            <tr> 
              <td></td>
              <td><font face="lucida sans" size="2">Please leave blank to login 
                as a guest</font></td>
            </tr>
            <tr> 
              <td></td>
              <td height="57"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr> 
                    <td width="38%" height="53"> </td>
                    <td width="20%" align="right"><input class="submitbutton" type="submit" name="login" value="Login"></td>
                  </tr>
                </table></td>
            </tr>
          </table></td>
      </tr>
    </table>
  </form>

 

Any suggestions would be appreciated. Thanks

[mark110384]

Managed a work around using CSS, however it seems to have effected how it works in Firefox now. I plan on using 2 style sheets, one for IE and one for the other browsers, I have

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="../landgstylesheet_ie.css" />
<![endif]-->

 

For IE but how would I referernce 2 Style Sheets? I tried

 

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="../landgstylesheet_ie.css" />
<![endif]-->

 

But that did not work.

 

[mark110384]

I have used this very nifty bit of JS to fix the problem

 

 

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF='../landgstylesheet_ie.css'>");
} 

else {
document.write("<link REL='stylesheet' HREF='../landgstylesheet.css'>");
}

// --></script>