I create a website and I have a problem, I can’t click in some field (or buttons) on my page which are in the Login fieldset. I can just click in filed (or buttons) which are in the Register fieldset.
I use LESS for the CSS, but if you don’t know this language you understand too.
Where are my errors ?
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>
LESS Code :
body
{
#masterContent
{
width: 80%;
margin: auto;
#connectPanel
{
width: 20%;
float: left;
margin-right: 2%;
}
#content
{
width: 100%;
position: relative;
}
}
}
Your elements #content is overlapping #connectPanel, so you should simply margin it a little bit more to the left
see jsfiddle here