In Internet Explorer, when utilizing a table-cell with a variable height, the position should be set to absolute for

I'm struggling with getting a uniform height in my horizontal layout using display: table-cell. While it looks great in Chrome, I can't seem to get Internet Explorer to display it the same way.

Check out this link for reference

This is how I want it to appear: .

However, in IE9, IE10, and IE11 it ends up looking like this:

  • The height of .cell should adjust dynamically.
  • It must function properly in at least Internet Explorer.
  • The vertical dotted line, .top, needs to have a variable height.
  • The horizontal dotted line, .right, should be able to move around.
htmlcssinternet-explorerhtml-table

Answer №1

There are alternative methods to achieve a consistent height layout without relying on display:table-cell, which have proven to be more effective in older versions of Internet Explorer such as IE11-. However, it is challenging for me to recommend one since I am unsure of the significance of the two small dotted lines and why they are present.

One potential solution could be found here: http://jsfiddle.net/zq4EA/3/. Please review it and inform me if it does not meet your requirements, along with an explanation, so that we can work on finding a better solution together :) I hope this information is helpful!

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

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

javascripthtmlselectorelement

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

javascriptjqueryhtml

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Experimenting with a combination of vue.js and vanilla to create a blackjack game. The card data is stored in the vue data() like this: data(){ return { cards: [ {id: 1, cardName: 'Ace of Spades', cardPic: ' ...

javascripthtmlvue.js

Limit the 'contenteditable' attribute in table data to accept only integers

I have a question regarding editing table data row. Is there a way to restrict it to only integers? Thank you for your assistance! <td contenteditable="true" class="product_rate"></td> ...

javascriptjqueryhtml

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

The correct way to reference images in the resources folder using a URL in CSS

After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...

cssmaven

BeautifulSoup: Retrieve text from HTML lists that are designated exclusively with bullet points

Seeking assistance on how to extract the text specifically within a bulleted list from a Wikipedia article using BeautifulSoup. I am aware that list items are enclosed in <li> tags in HTML, regardless of the type of marker used before each item in t ...

pythonhtmlbeautifulsoup

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

jquerycss

Experiencing inconsistencies with CSS on certain devices?

When faced with a research issue, I usually turn to Google for answers. However, this time, I was unsure of where to begin. As part of my efforts to enhance my frontend development skills, I undertook The Odin Project and worked on a calculator project. U ...

cssresponsive-designfrontendmobile-website

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

htmlcsstwitter-bootstrap

Retrieve the webpage content (including any iframes) using a Firefox plugin

Hello there! I am currently working on retrieving data from a webpage that is updated using Javascript. Initially, I attempted to create a Java program to periodically fetch this page from the server, but the information was being updated too slowly. The ...

javascripthtmlfirefoxbrowser

Remove the option to select specific minutes from the time input on an HTML

My HTML code includes a time input that looks like this: <input id="appt-time" type="time" name="appt-time" value="13:30" /> I want to figure out how I can remove the minutes from the input or ensure that the ...

htmltime

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

javascripthtmlvalidation

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

Execute JavaScript/AJAX solely upon the selection of a button

Currently, my script is being executed immediately after the page loads and then again after a button click. Is there any way to modify it so that the script waits until I click the button before running? As far as I understand, this code runs asynchronous ...

javascriptjqueryhtmlajax

Receiving "Illegal Invocation" error when attempting to submit form using ajax

I am attempting to submit a form using ajax, and here is the form code: <form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data"> <div class="form-group"> <label ...

javascriptajaxhtmlajaxform

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

javascriptjqueryhtml

The container stays vacant as the bootstrap modal gracefully appears with a fading effect

I am trying to implement a basic bootstrap modal into my project, but I am encountering some issues with the code. When I click the "Launch demo" button, the modal fades in as expected, yet the container supposed to contain the ".modal-header", ".modal-bo ...

jqueryhtmltwitter-bootstrapmodal-dialog