No overflow is occurring within the DIV element

This code snippet is fully functional on all browsers except for IE. Unfortunately, the overflow feature does not seem to be working correctly. Any assistance would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">
#scroll {
  width: 500px;
  height: 250px;
  overflow: auto;
}

.box {
  position: relative;
  height: 100px;
}
</style>

</head>
<body>
  <div id='scroll'>
    <div class='box' style="background-color: red;"></div>
    <div class='box' style="background-color: black;"></div>
    <div class='box' style="background-color: yellow;"></div>
    <div class='box' style="background-color: blue;"></div>
    <div class='box' style="background-color: green;"></div>
  </div>
</body>
</html>

Answer №1

Does this meet your needs?

Answer №2

By eliminating the "position:relative;" from the .box CSS definition, I am confident that it will function properly in both FF and IE 6.0.

Update: After conducting tests, I can confirm that it is functional in FF 3.6.8 and I.E. 6.0.28 (i.e. maintaining the 100px boxes within the scroll div).

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

Unusual occurrences observed with table cell padding in CSS

When I include a TD padding in my CSS like this: #maincontent table td, #maincontent table th { padding: .333em 0 .333em .25em; } In Safari and IE, the padding is applied correctly to the TD, but not in Firefox. If I apply the TD padding only to th ...

Is there a way to apply padding to a div element that has a display property set to table-cell?

I am trying to achieve a design where I have an image and a div containing vertically centered text. The div should have padding around it along with a border, similar to this example: https://i.sstatic.net/VlgIY.png Currently, this is the closest I have ...

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

What is the best way to ensure IE opens with the homepage using the InternetExplorerDriver without it being remembered for the next test run?

After running tests with InternetExplorerDriver, I've noticed that it occasionally keeps tabs from previous tests when new ones are run. I understand this is related to the IE setting shown below, but I'm looking for a way to automate this setti ...

What are the disadvantages associated with the different methods of submitting data?

My goal is to create an Online testing platform. I have come across two different approaches to verify user-selected answers. Approach 1 <div class="qContainer" index="0"> Who holds the record for scoring 100 centuries in International cricke ...

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

Repurposing JavaScript objects after clearing their contents

Here's my issue. I'm working with a Javascript object, initialized as var stack = {}. This object is used in my project to store arrays. When the user clicks the add button, an array is added to the object with a specific key that is inputted in ...

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

Adjusting the size of absolutely positioned div elements

Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively. The central part needs to be resizable wit ...

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

I am struggling to achieve a two-column layout with nested columns inside each one. The code I used looks great on Chrome and Safari, but on Firefox and IE, it only displays in a single column: What mistake am I making here? .two-columns { column-cou ...

When attempting to utilize drag and drop functionality in HTML5, the error message "DndSimulator is not

Currently, I am using selenium webDriver in C# on a Windows platform to automate tests involving HTML5 drag and drop. In my approach, I rely on the dragTo method from Selenium for achieving this functionality successfully in one test. However, when I attem ...

The application of border-radius causes the div to extend beyond its intended height

Is there a way to achieve a smooth shadow effect on pictures without it touching the corners? I attempted to do this by adding a border-radius and box-shadow to the parent div of the images, but now the parent div is taller than the picture itself. Any sug ...

Incorporating HTML5 audio elements in JavaScript

I am working on a project where I need to create a grid of 16 audio files with separate links for each in HTML, CSS and JavaScript. Each box in the grid should link to a different audio file. My initial thought was to use a table to achieve this, so I cre ...

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

Prevent horizontal HTML scrolling while displaying a layer

I am currently working with a .layer div element that darkens the page to highlight a modal. However, I have encountered an issue where upon triggering the event, the div does not occupy 100% of the screen and the original browser scroll bar disappears. I ...

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...