Issue with overflow auto not functioning correctly in IE when applied inside a div

Here is my code snippet: http://jsfiddle.net/FbC86/. When viewed in Chrome or Firefox, the text inside the cell overflows correctly with a vertical scrollbar. However, when opened in Internet Explorer, it does not work as expected.

Being new to web development, I am seeking advice on how to solve this issue. Thank you in advance for your help!

Snippet of the code:

CSS

div.main
{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:auto;
}
div.transparent{
    padding:3em;
    background-color: rgba(255,255,255,0.7);
    display:block;
}

HTML

...
<td colspan="7" valign="top"  style="height:0;" >
    <div class="main">
    <div class="transparent">
Here goes a long text
</div</div></td>
...

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

What is the best way to completely manipulate the rotation of a <div>?

Does anyone have a solution for controlling the rotation of a div using CSS? I've been grappling with this issue for some time now, but I can't seem to find a proper fix. Whenever I try to rotate a div within a table cell, the width of the cell ...

Having difficulty retrieving precise HTML information for data scraping purposes

I'm a beginner in python and exploring web scraping for a project on . Currently, I'm using selenium to automate the search for a CUSIP and then extract specific details about it. Although I've successfully automated navigation from EMMA&a ...

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

Additional pixels for chat scrolling in AJAX are needed

Hey there! I finally cracked the code on how to prevent chat scrolling when a user scrolls up to read, and then resume scrolling once they reach the bottom. However, I've encountered a hitch - the chat adds an extra 17px when I set a size for each po ...

Achieve a bottom alignment in Bootstrap without using columns

I am looking to align the elements within a div to the end, but when I use Bootstrap's d-flex and align-items-end classes, it causes the elements to be split into columns. This is not the desired outcome. How can I resolve this issue? <link href ...

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

Unable to activate the navbar toggle feature on Bootstrap 4.0

****I have started working with bootstrap 4.0, but I am facing issues with the navbar toggle functionality. Even after trying to copy code from the official documentation and using the current alpha version of bootstrap, the toggle is not working as expe ...

What is the best way to center <div> elements in CSS to give them a target-like appearance and ensure they are aligned perfectly?

I have been attempting to craft a target using div elements, but I am struggling with aligning them in a way that ensures they are all centered and the smallest div element is visible on top. My HTML file only consists of div elements as I am making all mo ...

Enabling the `dbc.Select()` function to require a dropdown selection in DASH does not automatically highlight an empty dropdown

While working on my plotly-Dash form, I utilized bootstraps dbc.Select() to generate a dropdown. I hoped to have it outlined in red, similar to my dbc.Input() boxes, when no option is selected. However, the red border is not showing up. I set required = ...

Struggling with incorporating validation using JavaScript in HTML

As a newcomer to the world of html and js, I am struggling to incorporate js into my html code. Despite multiple attempts at modification, I have not been successful in getting it to work. Any guidance or advice on this issue would be highly appreciated. ...

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

Struggling to successfully validate a user's return value with AJAX

When the user enters incorrect information, I need to ensure that the okLogin variable is set to false and prevent the form from being submitted. However, I have noticed that the return statement in my function is being executed before the ajax call, which ...

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

Insert PDF to completely fill the screen

Seeking advice on embedding a PDF in an HTML document with a consistent height of 100%. The challenge lies in the varying height of the PDF, and the need for the layout to adapt accordingly. ...

Is there a way to format the text into a curved half-capsule shape?

<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...

Unable to input data into the Database using an HTML Form combined with PHP

I am facing an issue with my MyPHP Database as no records are showing up when I execute these scripts. The environment I am using includes: APACHE 2.4.7 MYSQL 5.6.15 PHP 5.5.8 Let's start with the HTML Code... <html> <center> <f ...

Are buttons continuously added on top of each other?

It seems that the root of my problem lies in my use of ng-repeat, so I won't go into too much detail on the rest but feel free to ask for more information. Indeed, I am employing ng-repeat to iterate over a certain number of div elements stored in an ...

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...