In CSS, Internet Explorer fails to recognize the margin-bottom property of the last div

I have a container with three divs: header, content, and footer, set up in a standard application format.

Here is the structure:

<body> 
    <div> 
        <div id="ROOT" > 
            <div id="ROOT_0" > 
                Header
            </div>

            <div id="ROOT_1" > 
                Content
            </div>

            <div id="ROOT_2" > 
                Footer
            </div>
        </div>
    </div>
</body>

The current CSS styling:

html {height:101%;}
body {background:#999999;}

#ROOT{ background-color:#333333; width:980px; margin-left:auto; margin-right:auto; overflow:auto;}
#ROOT_0{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:5px; margin-left:5px; margin-right:5px; margin-bottom:5px;}
#ROOT_1{width:980px; text-align:center; float:left; background-image:url(../img/sfondofc.jpg);}
#ROOT_2{background-color:#FF9933; width:970px; padding-top:5px; padding-bottom:5px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; font-weight:bold; font-size:13px;}

background-color:#FF9933; width:970px; padding-top:5px; padding-bottom:5px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; font-weight:bold; font-size:13px;

Unfortunately, in IE (6), the margin-bottom:5px; on the footer is not showing up. Which property do I need to adjust? Thanks

cssinternet-explorermargin

Answer №1

What was the reason behind setting the height property of html to 101 percent?

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

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

htmlcsstwitter-bootstrap

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

Design that adapts to various screen sizes and devices

I'm facing an issue where the two elements are misaligned on mobile, even though they display perfectly on desktop. In some cases, the bottom element is partially hidden on the left side as shown here: Any suggestions on how to center these elements ...

cssmobileresponsive-design

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen. /**{ margin: 0; padding: 0; box-sizing: ...

htmlcsscss-positiontext-alignment

Instruments for crafting an application compatible with a wide range of web browsers

Currently tackling various browser challenges. I find myself wondering whether it's achievable to create an application that is compatible with all browsers, or at least the majority. Should it be a web application? Any recommendations on frameworks a ...

javascriptjqueryperformancecss

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

javascriptjquerycssperformanceflickity

Having trouble inserting a new list item within a Bootstrap tab

I have a question regarding the creation of a tabbed interface using the code below: <ul class="nav nav-tabs"> <li class="active"><a href="#">Chart 1</a></li> <li><a href="#">Chart 2</a></ ...

htmlcsstwitter-bootstrap

Discover the joy of reading with wrap/unwrap to consume more content in less

I am experimenting with a 'read-more read-less' feature using a wrap method that currently only works for the 'show more' functionality. So, to clarify, if the text exceeds a certain length, I truncate it and insert a read-more-link ( ...

javascripthtmljquerycssshow-hide

Unique Floating Bullet Icons Ascending When Enlarged

I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any sol ...

htmlcsscss-float

Is HTML5 local storage not functioning properly on IE11 in Windows 8.1 x64? Encountering an error message:

Is anyone else experiencing this issue where information cannot be found, even though it was previously fixed in a patch a long time ago? Has anyone else encountered this? localStorage.setItem("hello", "somedata"); alert(localStorage.getItem(" ...

javascripthtmlinternet-explorer

Create a row in React JS that includes both a selection option and a button without using any CSS

My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element https://i.sstatic.net/3gfkO.png Below is the code snippet that I ha ...

javascriptcssreactjsfrontend

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be gr ...

htmlcssflexboxfullscreencenter

Achieving functionality with dropdown menus in jQuery

I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server. jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/ HTML <!doctype html> <html> < ...

javascriptjqueryhtmlcss

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

htmlcssfixedfluid

What are some effective ways to stretch specific muscles?

I am facing an issue with my select element. The default value is "please choose," but there are options like "Accommodation & Hotels" that are longer and not clearly visible on IE browsers, though they work fine in Firefox. How can I resolve this issue? S ...

javascripthtmlcss

Enhance the appearance of CardMedia in React Material UI with custom rendering options

I am curious about how I can customize the CardMedia component of React Material UI to achieve a design similar to this: https://i.sstatic.net/Spdbz.png In the desired result, there are 3 elements: The image itself in WebP format (see example) A dur ...

cssreactjsimagematerial-uifrontend

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

javascripthtmlcssinternet-explorer-8opacity