What could be causing the absence of the input elements on my webpage?

Finally Got It to Work! After troubleshooting, I managed to fix the code on the first page and successfully link it to this second page. Despite using the same CSS and similar HTML, I couldn't figure out why the buttons were not displaying at all.

Important Note: Interestingly, when I removed the .css link from my .html file, all the buttons and inputs appeared! I also rectified the issue with "hidden" in .comm and added the following code:

#register{
    visibility: visible;
}

* {
  padding: 0;
  margin: 0;
  /*box-size:border-box;*/
}

body {
  background: rgba(255, 84, 151, 0.40);
}

#container {
  width: 300px;
  margin: 0 auto;
  margin-top: 150px;
}

.tabs {
  display: table-cell;
  width: 30%;
  background-color: rgba(11, 177, 224, 0.82);
  padding: 10px;
  float: left;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #ffffff;
  border-bottom: 0px;
  position: relative;
  font-size: 1.3em;
  color: #ffffff;
}

.tabs:hover,
p {
  cursor: pointer;
}

#lt {
  background-color: rgb(12, 132, 189);
}

#cont {
  width: 95%;
  height: 380px;
  background-color: rgba(11, 177, 224, 0.82);
  border: 2px solid #ffffff;
}

input {
  display: block;
  width: 250px;
  margin: 10px 13px;
  padding: 10px;
  font-size: 1.3em;
  color: rgba(11, 177, 224, 0.82);
  outline: 2px solid #ffffff;
}

input[type="submit"] {
  width: 272px;
  color: #6e6e6e;
}

#clear {
  clear: both;
}

.comm {
  position: absolute;
  visibility: hidden;
}

#login {
  visibility: visible;
}

h3 {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 15px;
  font-size: 1.5em;
  color: #ffffff;
}

#forgot h3 {
  display: block;
  margin-top: 30px;
  text-align: center;
}

#forgot div {
  margin-top: 30px;
}

p {
  padding: 10px 15px;
  font-size: 1.3em;
  color: #ffffff;
}

Thank you!

htmlcss

Answer №1

You have applied a visibility rule to hide everything within the .comm class. It is recommended to remove this rule to make the content visible.

* {
  padding: 0;
  margin: 0;
  /*box-size:border-box;*/
}

body {
  background: rgba(255, 84, 151, 0.40);
}

#container {
  width: 300px;
  margin: 0 auto;
  margin-top: 150px;
}

.tabs {
  display: table-cell;
  width: 30%;
  background-color: rgba(11, 177, 224, 0.82);
  padding: 10px;
  float: left;
  text-align: center;
  vertical-align: middle;
  border: 2px solid #ffffff;
  border-bottom: 0px;
  position: relative;
  font-size: 1.3em;
  color: #ffffff;
}

.tabs:hover,
p {
  cursor: pointer;
}

#lt {
  background-color: rgb(12, 132, 189);
}

#cont {
  width: 95%;
  height: 380px;
  background-color: rgba(11, 177, 224, 0.82);
  border: 2px solid #ffffff;
}

input {
  display: block;
  width: 250px;
  margin: 10px 13px;
  padding: 10px;
  font-size: 1.3em;
  color: rgba(11, 177, 224, 0.82);
  outline: 2px solid #ffffff;
}

input[type="submit"] {
  width: 272px;
  color: #6e6e6e;
}

#clear {
  clear: both;
}

.comm {
  position: absolute;
  /* visibility: hidden; <----------------------------HERE */
}

#login {
  visibility: visible;
}

h3 {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 15px;
  font-size: 1.5em;
  color: #ffffff;
}

#forgot h3 {
  display: block;
  margin-top: 30px;
  text-align: center;
}

#forgot div {
  margin-top: 30px;
}

p {
  padding: 10px 15px;
  font-size: 1.3em;
  color: #ffffff;
}
<header>
  <h2>Billy Bronco's Grading Calculator</h2>
</header>

<div id="container">

  <div id="tabs">

    <p id="rt" class="tabs" onclick="regTabFun()">Register</p>
    <link rel="stylesheet" href="Login.css">

    <div id="clear"></div>
  </div>

  <div id="cont">

    <div id="register" class="comm">
      <h3>Register</h3>

      <input id="re" type="email" placeholder="Email" required/>
      <input id="rp" type="password" placeholder="Password" required/>
      <input id="rrp" type="password" placeholder="Re write Password" required/>

      <input type="button" class="button" id="enterR" value="Register">
      <input type="button" class="button" id="enter" value="Login">
      <input type="button" class="button" id="forgotPass" value="Forgot Password?">

    </div>

  </div>

</div>
<script src="RegisterTs.js"></script>

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

Preventing scrollbar-induced content shifting in Material-UI components: A guide

My browser app displays content dynamically, which can vary in length compared to the screen size. This causes a vertical scrollbar to appear and disappear on desktop browsers, leading to the content shifting left and right. To prevent this, I apply style ...

htmlcssmaterial-ui

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

htmlcsslayout

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

Retrieving information from a form containing a list of numerous values

Thank you all for taking the time to review my code. Unfortunately, I couldn't solve the issue until I went through more code and redid everything. Eventually, I found the solution using PHP for the form: Here's my HTML form (some descriptions a ...

phpjqueryhtmlemail

Incorporating a new component into the table tab design with HTML

One more question to wrap up the day. Here is my current setup along with the corresponding CSS: <p>&nbsp; </p> <p>&nbsp; </p> <div class="row tab-cover"> <div class="col-sm-4"><a href="/home" target=" ...

htmlright-align

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Is there a more effective method to construct this 3x2 "table" using DIVS? I'm considering using traditional tables code <table> since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achiev ...

htmlcssgrid-layout

Integrate Tailwind CSS into the bundled JavaScript file

Is there a way to integrate tailwind css into bundle js effectively? Take a look at this example involving vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. Upon executing npm run build , it generates 3 files: app.js ABOUTPAGE.js app.6cba1 ...

javascriptcssvue.jstailwind-css

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...

htmlcssnav

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

Executing operations on checkboxes on a webpage without access to model files

I am facing an issue with accessing the models file due to encryption in the software. Currently, my checkboxes are implemented using Ajax within a PHP query. Since it is Ajax-based, I am unable to manipulate actions through the URL. My goal is to extract ...

javascriptphphtml

A new ASP.NET MVC-5 web application is missing the class definition for "input-validation-error."

I recently created a new ASP.NET MVC-5 web application using Visual Studio 2013. When I attempted to use the built-in login form and left the required fields empty, I noticed that the fields were not highlighted in red as expected. https://i.sstatic.net/m ...

cssasp.netasp.net-mvcasp.net-mvc-5

Changing color of Font Awesome Icons upon hover, without any animation

I need assistance with changing the color of font awesome icons on hover without any animation. Specifically, I want the icon colors to transition from indigo to blue and finally red when a user hovers over them, without the colored icon appearing abruptly ...

htmlcssbootstrap-4

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over. <div class="a"></div> Above ...

htmlcss

Challenges arise when working with arrays: Attention required - Offset 0 undefined

I have encountered a challenge with my PHP code. I am attempting to convert an HTML table into an array and then execute a mysqli query, but I am unsure about the process. In my code, I have a variable $aDataTableDetailHTML[][]. The first set of brackets ...

phphtmlmysqljson

Tips for incorporating extensive amounts of HTML into Internet Explorer without causing excessive strain on the CPU

I have been exploring a more ajax-based approach to loading data on a page in order to avoid postbacks. I can easily retrieve server-generated HTML through an ajax call, and adding it to the DOM is straightforward with jQuery's .append or .replaceWith ...

jqueryhtmlajaxinternet-explorerdom

Issues arise when attempting to insert data into an HTML file using PHP

Good evening, I am having a problem where when I attempt to use PHP to replace "hello world" in an HTML file, it ends up completely empty each time. Can anyone point out what mistake I might be making? Here are the HTML and PHP files: <!DOCTYPE html&g ...

phphtmlcss

Trouble with virtual canvas when attempting to put image data

I am new to the virtual canvas concept and I'm having trouble with the code below. Can anyone help me figure out why it's not working? <script type="text/javascript"> $(document).ready(function () { var c1 = docu ...

javascripthtmlcanvasoff-screen

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

javascriptcssreactjsmaterial-uimakestyles

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

javascriptphpjqueryhtmlcss

Update a Div, Table, or TR element without the need for a page reload or Ajax usage

How can I refresh a div, table or <tr>? The data displayed is not coming from a database, it's just a simple error block and the value comes from Java-script. The issue arises when a user inputs a value in a textbox, the value gets stored in th ...

javascripthtml