Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is

While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard.

Initially, everything was functioning correctly. However, after inputting an incorrect password and removing the error message line from the code, the functionality of entering the password ceased. The code for displaying the error utilized a div class of alert alert-danger.

The primary issue at hand pertains to the inability to enter the password in mobile browsers.

<!DOCTYPE html>
<?php
    $error = "";
    if(isset($_POST['username'],$_POST['password'])){

        /*** You can change username & password ***/
        $user = array(
                        "user" => "abc",
                        "pass"=>"def"          
                );
        $username = $_POST['username'];
        $pass = $_POST['password'];
        if($username == $user['user'] && $pass == $user['pass']){
            session_start();
            $_SESSION['simple_login'] = $username;
            header("Location: Email_Manager.php");
            exit();
        }else{
            $error = "Invalid Login Credentials";
            echo "<script>alert('".$error."'); window.history.back();</script>";
        }
    }
?>

<html>
    <head>
        <link rel="icon" type="image/png" href="favicon.png">
         <style>

.footer {
   height:60px;
   width: 99%;
   background-color: Transparent;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: white;
   text-align: center;
   position: relative;
   bottom: 0;
}
.header {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
 /*  background-color: #4CAF50; */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: white;
   text-align: center;
}
.tableadjust {
   position: fixed;
   margin: auto;
    width: 60%;
   top: 30%;
   margin:auto;
}
</style>   

    <style>


    #grad1 {
    height: 200px;
    background: #2939B3; /* For browsers that do not support gradients */
    background: linear-gradient(to right,   #1385CC , #2939B3); /* Standard syntax (must be last) */
    }
#emails {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%; 
    max-width: 512px;  
}

#emails td, #emails th {
    border: 0px solid #ddd;
    padding: 8px;
    color: white;
}

/* #emails tr:nth-child(even){background-color: #f2f2f2;} */

/* #emails tr:hover {background-color: #ddd;} */

#emails th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
   /* background-color: #4CAF50; */
    color: white;

}
input[type=text], input[type=password], input[type=search] {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 6px 10px;
    margin: 3px 0;
    box-sizing: border-box;
    border-radius: 25px;
}
    input[type=button], input[type=Submit], input[type=reset] {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     background-color: Transparent; 
    border-radius: 25px;
    border: 2px solid #FFFFFF;
    color: white;
    padding: 6px 10px;
    text-decoration: none;
    margin: 3px 2px;
    cursor: pointer;
    </style>
    <title>
    Email Management
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    </head>
    <body id="grad1"><center>
    <div style="max-width: 512px; width:100%; margin: auto; top: 100px; position: relative;">
        <img src="favicon.png"></img>
    <table id="emails">
        <thead>
            <tr><th colspan=2>Login to Email Management
        </thead>
        <tbody>
            <form method=POST action="index.php">
            <tr><td>Username: <td><input placeholder="Username" name="username" type="text" style="width:100%">
            <tr><td>Password: <td><input placeholder="Password" name="password" type="password" value="" style="width:100%">
            <tr><td colspan=2><input type="submit" value="Login" style="width:100%">
        </tbody>

    </table>

    </div>

    <footer class="footer"><br> <br> <br> <br> <br>
  <p style="width: 100%">Powered by <a href="http://www.byteitcorp.com" style="color:white;">ByteIT Corp</a></p>
</footer>
    </center>


<div class="header">
  <p><font size=25><b></b>EMAIL MANAGER</b></font></p>
</div>

    </body>

    </html>

Answer №1

If you're experiencing an issue, try removing the position:relative; from your footer class. Remember, using 6 <br> tags might indicate a problem with your code. :)

edit:

  1. Remove position:absolute from <font> (where EMAIL MANAGER is located)
  2. Get rid of position from
    <div style="max-width: 512px; width:100%; margin: auto; top: 100px; position: absolute;">
  3. Place the font with EMAIL MANAGER above
    <div style="max-width: 512px; width:100%; margin: auto; top: 100px; position: absolute;">

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

Hiding a div becomes impossible once it has been set to display:block

When I click on an element, I want a box to open and then when I click on a "CLOSE" button, I want it to disappear. However, I am encountering an issue where the box appears using "display:block" but does not disappear with "display:none" as intended (see ...

All fields in the form are showing the same error message during validation

This is the HTML code: The form below consists of two fields, firstname and lastname. Validation Form <form action="" method="post"> Firstname : <input type="text" placeholder="first name" class="fname" name="fname" /> <span class= ...

The program encountered an error while trying to access the undefined property '_header'

An issue arises when the app.use(express.static("web")) line is executed. var express = require('express')(); var app = express(); var http = require('http').Server(app); var io = require('socket.io')(http); //app.get(&apo ...

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...

The background color spills outside the column when using 100% width

Bootstrap 5 is being used, and two columns have been created on the page. The current output looks like this: https://i.stack.imgur.com/P6oZs.png Now, there's a need to display an orange color from end to end of the left column. To achieve this, h- ...

"Upon invoking the console log, an empty value is being returned when attempting to access the

Why is console.log returning a blank line when trying to retrieve the value of a text input variable? HTML <label for="subject">Subject</label> <input type="text" id=" ...

"Customize the font style of columns in a WordPress table created with TablePress by setting them to it

Recently, I designed a table in a WordPress blog using the TablePress plugin. My intention now is to style the left column's font in italics, excluding the table header. ...

What is the best way to incorporate a fadeIn effect while using the .attr method?

I am working with a line of code that switches between classes class1 and class4 to update the background of my website. I would like to incorporate a fadeIn effect each time the class changes. Can you help me with this? Thank you! Below is the code snipp ...

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

PHP/HTML code being disrupted by the improper use of quotation marks

Trying to update some inherited code is proving tricky due to the use of quote marks. Here's the original snippet: <a href='<?php echo SITE_URL.'members-search.html';?>' class='btn btn-large<?php if($curPage == "F ...

Transitioning from a fixed position to absolute in CSS3

Sticky Logo Element In my project, I implemented a logo element that is positioned absolutely within the document. As the user scrolls, the logo sticks to the top of the window with a fixed position (you can view an example here: https://jsfiddle.net/swzb ...

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

The sign out option fails to erase the data stored in Local Storage

After implementing a login feature that stores a token in local storage, I encountered an issue with the logout button. The intention was for the button to delete the token from local storage and set the user to null upon clicking it. However, this functio ...

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

Tips for adjusting arrow alignment in your custom breadcrumbs using Bootstrap 5.2.0

There is an issue with my custom Bootstrap 5.2.0 breadcrumb - the right arrow appears before the end of the breadcrumb's item box when I add one or more items. To demonstrate the problem, I have created a fiddle where you can see the error: .breadcru ...

Avoiding the repetition of CSS animations during Gatsby page hydration

I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening? Below is my styled components code ...

The image is not appearing on the webpage even though the online URLs are functioning correctly

I am currently facing an issue with my Django portfolio website where I cannot get my photo to display even though the path is correct. However, online images are displaying properly on the site. <html lang="en"><head><link href="https: ...