I have encountered an issue with my website where I am unable to click on certain fields or buttons within the Login fieldset. Strangely, I can only interact with the fields and buttons located within the Register fieldset.
The CSS for my website is written in LESS, but even if you are not familiar with this language, you can still help me troubleshoot.
Can anyone identify what might be causing these errors?
Below is the snippet of HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://localhost/Website/scripts/jQuery.js"></script>
<link rel="stylesheet/css" type="text/css" href="http://localhost/Website/styles/reset.css">
<link rel="stylesheet/less" type="text/css" href="http://localhost/Website/styles/style.less">
<script src="http://localhost/Website/scripts/less.js" type="text/javascript"></script>
<title>Ushahidi self-help</title>
</head>
<body>
<div id="masterContent">
<div id="connectPanel">
<form id="loginForm" method="post" action="">
<fieldset>
<legend>Login</legend>
<table>
<tr>
<td><label for="email_login">Email</label></td>
</tr>
<tr>
<td><input type="email" name="email_login" id="email_login" maxlength="45" /></td>
</tr>
<tr>
<td><label for="password_login">Password</label></td>
</tr>
<tr>
<td><input type="password" name="password_login" id="password_login" maxlength="45" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" /></td>
</tr>
<tr>
<td><a href="http://localhost/Website/page/register">Sign up</a></td>
</tr>
</table>
</fieldset>
</form>
</div><div id="content"><form id="formRegistration" method="post" action="">
<fieldset>
<legend>Register</legend>
<table>
<tr>
<td><label for="lastName_register">Last Name :</label></td>
<td><input type="text" name="lastName_register" id="lastName_register" maxlength="45" /></td>
<td id="errorLastName_register" style="display:none;">Error</td>
</tr>
<tr>
<td><label for="firstName_register">First Name :</label></td>
<td><input type="text" name="firstName_register" id="firstName_register" maxlength="45" /></td>
<td id="errorFirstName_register" style="display:none;">Error</td>
</tr>
<tr>
<td><label for="email_register">Email :</label></td>
<td><input type="email" name="email_register" id="email_register" maxlength="45" /></td>
<td id="errorEmail_register" style="display:none;">Error</td>
</tr>
<tr>
<td><label for="password_register">Password :</label></td>
<td><input type="password" name="password_register" id="password_register" maxlength="45" /></td>
<td id="errorPassword_register" style="display:none;">Error</td>
</tr>
<tr>
<td><label for="confirmPassword_register">Confirm Password :</label></td>
<td><input type="password" name="confirmPassword_register" id="confirmPassword_register" maxlength="45" /></td>
<td id="errorConfirmPassword_register" style="display:none;">Error</td>
</tr>
<tr>
<td><input type="submit" value="Register" /></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript" src="http://localhost/Website/connection/register_script.js"></script> </div> </div>
</body>
</html>
And here is the LESS Code snippet:
body
{
#masterContent
{
width: 80%;
margin: auto;
#connectPanel
{
width: 20%;
float: left;
margin-right: 2%;
}
#content
{
width: 100%;
position: relative;
}
}
}