Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox.

Here is the URL:

http://linco.com.py/beta/multiplaza/cartelera.php

The styling for the main container is as follows:

position: relative;
width: 23%;
height: 0px;
padding-bottom: 30%;
margin-left: 1.5%;
margin-top: 20px;
float: left;

For the child container, I have applied the following styles:

z-index: 2;
position: absolute;
opacity: 0;
background: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
left: 0;
display: table;
cursor: default;

Can anyone point out what mistake I might be making here? Thank you!

Answer №1

To make it function properly, simply delete the code line display:table.

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

Tips for ensuring text remains within a div container and wraps to the next line when reaching the edge

Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and mov ...

Guide to "flashing" an image momentarily on the screen using PHP

I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

Creating a form that is unable to be submitted

Can a form be created in HTML without the ability to submit, all while avoiding the use of JavaScript? I would like to utilize <input type="reset"> and have intentionally omitted an <input type="submit">, but there is still the possibility for ...

Navigating within an ionic framework

I am facing an issue with a simple form in my application. When I try to enter user details, the Android keyboard hides the email field and mobile number field, making it impossible for me to scroll the page upwards. Can anyone suggest a solution? <i ...

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

Background image loading gets delayed causing it to flicker

Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the las ...

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

Is it possible to dynamically adjust the width of table columns using CSS/LESS on a per-column basis?

In this scenario, the table's column width is determined by the number of columns present. For example, if there are 4 columns in the table, each column's width would be set to a maximum of 25% of the table's overall width. With 3 columns, t ...

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

Selecting a webpage from a dropdown list to display its specific content within an iframe

I have a dropdown menu similar to this: <form name="change"> <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value"> <option value="">Choose</option> <opti ...

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Imagine having a canvas divided into a 15x10 32-pixel checkerboard grid. This setup looks like: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tileSize = 32; var xCoord var yCoord ...

What technique is used in this CSS code to give each line of text a unique horizontal color gradient?

I stumbled upon a fascinating jsfiddle that can create color gradients on specific lines of text. Each line has a unique two-color gradient applied in a consistent pattern: Black to Red, Red to Black, Black to Blue, and Blue to Black. Despite its intrigui ...

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

What is the best way to declare a minimum and maximum date in HTML as the current date?

I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...

Image loading in NextJS is limited to only Firefox browsers

Images are loading only in Firefox and not anywhere else. Here is the import statement: import gradient from '../public/mountains/gradient.svg' And here is the Image component: <div id='gradient' className={`${styles.bgimage} ${sty ...

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

Rotating the transform causes the div to be pushed beyond the screen boundaries and renders

html, body { margin: 0; padding: 0; overflow-x: hidden; } /*HEADER*/ #header { background: blue; background-attachment: fixed; background-size: cover; width: 100vw; height: 100vh; } .btn-1, .btn-2, .btn-3 { background ...