Struggling to interact with a field within an HTML/CSS LESS document

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;
        }
    }
}

Answer №1

The content in your #content area is overlapping with #connectPanel. To fix this, try adjusting the margin to the left.

#content
{
    width: 100%;
    position: relative;
    margin-left: 20%;
}

Check out the jsfiddle example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with implementing CSS transitions

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from ...

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

Design a custom icon for uploading multiple files

Looking to create a bootstrap-4 icon for multi-file upload. I've got the code reference for single file upload, but now I need to know how to create an icon for multi file upload. <!DOCTYPE html> <html> <head> & ...

Modify the hover color of heading 1 only for hyperlink texts

I am attempting to adjust the hover color specifically for text that contains a link. Below is the CSS code I have tried, but it changes the color regardless of whether there are links present or not. h1, h2, h3, h4 { color:#3F3F3F; } h1:hover, h2:hove ...

Phonegap's JavaScript canvas feature is experiencing issues

Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

Error 404 encountered while attempting to access dist/js/login in Node.JS bootstrap

I currently have a web application running on my local machine. Within an HTML file, I am referencing a script src as /node_modules/bootstrap/dist/js/bootstrap.js. I have configured a route in my Routes.js file to handle this request and serve the appropri ...

adjust the fixed div's width to match the percentage-defined width of its parent element

My goal is to make a div with the position: fixed property have the same width as its parent element, which is a td. However, I am having trouble achieving this. Here is my current code: HTML: <table style="width: 90%; border: 1px solid black;"> & ...

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

On my webpage, there is a table containing table rows in the following format: <tr id="_C15DKNWCSV">text</tr> I am attempting to scan the webpage and extract all table rows that have an id in the format: id="_(10 RANDOM CHARACTERS)" I want ...

unique close button design for pop-up video player on YouTube

Struggling to add a custom close button to my Youtube video pop up. After unsuccessful research attempts, I'm turning to my fellow stack buddies for help. Any suggestions? ...

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

Conceal the Ajax Div and display the Loader Div while waiting for the data to be

Trying to show a loader div until the Ajax-populated div is returned. Want to hide "responseDiv" until it's filled with Ajax data and display a loading div in the meantime. #loading { background: url('images/loading.gif') no-repeat cent ...

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

Disabling a button does not automatically shift the focus to the next element in the tab order

Is there a way to limit the number of times a button can be clicked using jQuery? For example, I want a button that can only be clicked three times before disabling itself automatically. test.html <div class="main"> <input class="one" type="t ...

Tips for Creating a Responsive Homepage

I'm new to CSS and trying to create a responsive design for mobile IE. Currently, the page appears blank on IE but works fine on Google Chrome and other browsers :-) Here are the code snippets I have used: HTML: <div class="main"> <div ...

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

Attempting to display images in various formats using the Picture HTML element

Vue is being used to create a dynamic picture component, resulting in the following code: <picture style="display: contents;"> <source type="image/avif" sizes="700px" src ...

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...