Light Box Crashes in IE

rd_dcse

I have designed a simple login page. It works fine in firefox but fails in IE6 please resolve this problem. Thanks in Advance

It contains two files

index.php
bst_style.css

CODE FOR INDEX.PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en-in" lang="en-in" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="bst_style.css" rel="stylesheet" type="text/css" />


</head>
<body>


<div id="light" class="login_lightbox">

<!--Close Function starts here-->
	<div style="float:right; display:block;">
	<a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><strong><h1>X</h1></strong></a>
	</div>
<!--Close Function ends here"-->
<form name="frm_login" method="post">
<strong>Login.</strong><br />
		<div id="rplymsg_login" class="rplybox"> * Mandatory Fields</div>
		<table style=" height:50%; width:100%; text-align:center;" cellpadding="5">
		<tr>
		<td>User ID  : </td>
		<td><input type="text" value="" name="txt_userid" size="20" id="input_field" 
		title="usernmae" /></td>
		</tr>
		<tr>
		<td>Password :</td>
		<td><input type="password" value="" name="txt_password" size="20" id="input_field" 
		title="usernmae"/></td>
		</tr>
		<tr>
		<td>Select Type :</td>
		<td>
			<select name="cmb_type" text="Categories" style="width:146px"; >
			<option value="Guest"> Guest</option>
			<option value="Client"> Client</option>
			</SELECT>
		</td>


	<tr>
	<td></td>
	<td><a href = "javascript:void(0)" onclick ="fun_login();">
	<div class="click_box" style="float:right; width:100px;"><strong>Login</strong></div>
	</a></td>
	</tr>
	</table>
</form>
	<br />
</div>


</div><!-- Login Light Window Code Ends-->
<!-------------------------------------------------------------------------------------------------------------------------------->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>

<div id="fade" class="black_overlay"></div>
</body>
</html>

Code for CSS FILE

.black_overlay
{
	display: none;
	position:fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}
.white_content 
{
	display: none;
	position:fixed;
	top: 25%;
	left: 40%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid #3e464d;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

.login_lightbox
{
	display: none;
	position:fixed;
	top: 25%;
	left: 33%;
	width: 30%;
	height: 45%;
	padding: 16px;	
	border: 16px solid #3e464d;
	background-color: white;
	z-index:1002;
	overflow: auto;
}
.orgreg_lightbox
{
	display: none;
	position:fixed;
	top: 20%;
	left: 33%;
	width: 40%;
	height: 65%;
	padding: 16px;	
	border: 16px solid #3e464d;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

.guestreg_lightbox
{
	display: none;
	position:fixed;
	top: 20%;
	left: 33%;
	width: 40%;
	height: 60%;
	padding: 16px;	
	border: 16px solid #3e464d;
	background-color: white;
	z-index:1005;
	overflow: auto;
}

johanafm

Does it really crash IE6?

Anyway, seeing as IE6 has a 7-ish% and declining market share, do you really need to care about those users? There may be a value to doing so, but there is certainly a cost involved. When we still had support for IE6, I probably spent about 30% of my client-side development time just making things work in IE6.

Another very easy option is to simply provide IE6 users with a non js form.

Third way is to start debugging. Add output code to see just how far you get before IE6 breaks. Or if it doesn't work at all, start disabling parts of code until you have a minimal non-breaking code, and then enable parts again until you have minimal non-working code.
Add if checks for pretty much every function you use

if (document.getElementById) {
	// function exists
}
else {
	alert('getElementById is missing');
}

Just an example, since this one does exist in IE6 as well. But once you find functions that does not exist, or track down code that breaks in IE6, you can start googling on work-arounds.

Also, fun_login will not work unless you define it.