The child block element in Internet Explorer 7 expands independently of the parent's padding, ignoring

I'm having trouble understanding this situation.

There seems to be an issue with a block element inside another block element. The child element is expanding its height to 100% and overlapping the bottom padding of the parent, ignoring it completely.

What might be causing this unexpected behavior?

Check out the HTML code snippet below:

<span class="boxTop">
    <span class="boxBottom">
        <span class="boxLeft">
            <span class="boxRight">
                <span class="box">
                    Content goes here
                </span>
            </span>
        </span>
    </span>
</span>

And here's the corresponding CSS:

.infoBox .boxTop {
padding:20px 0 0 0;
display:block;
background:transparent url(images/infobox-top.png) repeat-x 0 0;
}
.infoBox .boxBottom {
padding:0 0 20px 0;
display:block;
background:transparent url(images/infobox-bottom.png) repeat-x 0 bottom;
}
.infoBox .boxLeft {
padding:0 0 0 20px;
display:block;
background:transparent url(images/infobox-left.png) repeat-y left 0;
}
.infoBox .boxRight {
padding:0 20px 0 0;
display:block;
background:transparent url(images/infobox-right.png) repeat-y right 0;
}

Here's a visual representation of the issue in IE7:

You can see the boxBottom here:

and both boxLeft and boxRight elements are expanding and disregarding the padding of boxBottom: http://img.photobucket.com/albums/v466/nemesis2k4/Forum%20Posts/boxright.jpg

htmlcss

Answer №1

Give this a try. Assuming you want to nest your .boxRight and .boxLeft within the .boxBottom container.

The HTML Structure

<span class="infoBox"> <!--InfoBox Start-->
 <span class="boxTop"> <!--boxTop Start-->
 </span>               <!--boxTop End-->

 <span class="boxBottom"> <!--boxBottom Start-->
  <span class="boxLeft">  <!--boxLeft Start-->
  </span>                 <!--boxLeft End-->

  <span class="boxRight"> <!--boxRight Start-->
  </span>                 <!--boxRight End-->
 </span>                  <!--boxBottom End-->
</span>                   <!--InforBox End-->

The CSS Styles

.boxTop
{
display: block;
padding-bottom: 20px;
}

.boxBottom
{
display: block;
padding-top: 20px;
}

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

Combining my CSS and JS files is causing code issues (works on my Mac, but not on the server)

Currently, I am in the process of merging my CSS and JS files before minifying them with the YUI compressor. My web application functions perfectly when each file is linked individually. Now, I am attempting to combine all the files into one single CSS fi ...

javascriptcssdeploymentcharacter-encoding

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

Guide to pinpointing a location with Google Maps

I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...

javascripthtmlcss

Problem: Toggle functionality not working properly in JavaScript

As a beginner, I am facing an issue with multiple toggle buttons. They work fine individually, but when nested within each other, only one toggle button works. After some research, I realized that I need to make adjustments to my JavaScript code. However, ...

javascriptphpjqueryhtml

Unable to get Bootstrap 4 overflow hidden to function properly within card layouts during animated transitions

In my project, I have an image inside a card layout and I am working on implementing a zoom effect on mouseover. However, I am facing an issue where during the animation, the image overflows from its parent wrapper. After the animation is completed, the ov ...

cssbootstrap-4

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

javascriptcssreactjstypescriptmaterial-ui

Ensure that the cursor is consistently positioned at the end within a contenteditable div

I'm working on a project where I need to always set the caret position at the end of the text. By default, this works fine but when dynamically adding text, the caret position changes to the starting point in Chrome and Firefox (Internet Explorer is s ...

javascriptjqueryhtmlpositioncaret

The compatibility of IE9 with tables and the use of display: block

When optimizing my site for low-width mobile devices, I adjust the display property of various table elements such as tr, td, and th to block in order to stack them vertically. This technique helps wide tables to show all their content without overflowing ...

htmlcssresponsive-designinternet-explorer-9internet-explorer-10

Arranging text and images strategically

I am trying to position an image and text within separate containers using div. The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div. Can you provide as ...

htmlcss

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

javascriptjqueryhtml

The YouTube video continues to play even after the container is closed

I recently worked on implementing a lightbox feature using jQuery, where a window opens upon clicking an element. Everything was working fine with images, but when I tried to open a YouTube video and play it, the video kept playing in the background even a ...

javascriptjqueryhtmlcssyoutube

Exploring the usage of slots in WebComponents without relying on shadow DOM

I am working on developing a WebComponent without utilizing ShadowDOM. So far, everything has been going smoothly. However, I now aim to create a component that wraps other components similar to how it is done in Angular with @ViewChild / @ViewChildren. (I ...

javascripthtmltypescriptweb-component

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

Unable to submit multiple forms simultaneously on the same HTML page

I have been encountering an issue with forms in a particular file. The problem arises when I click submit, rather than submitting the data from the filled form, it submits the data from the first form. Despite specifying unique ids for each form as shown i ...

phphtmlforms

A horizontal navigation bar featuring tabs that adjust their width automatically to ensure a consistent dimension across all

I'm aiming to create a horizontal menu that adjusts its width automatically to 100%. MY CSS .horizontal { width: 100%; } .horizontal ul { display: table; width: 100% } .horizontal li { display: table-cell; } .horizontal li a { height: 3 ...

csscss-float

When working with HTML entities, it decodes the ampersand symbol as &

Currently, I am developing a website using ASP.NET MVC which supports multiple languages. Whenever I try to input &#233; to display the character é, it ends up converting it to &amp;#233;. It appears that the system is automatically converting & ...

htmlasp.net-mvchtml-entities

Stylish Pop-up Box appears hidden behind a different element

Is there a way to fix the issue of the FancyBox plugin being blocked by some part of the HTML on the page when trying to load a Vimeo movie into a popup? Here is the live link: click here : it's when you click on the slider image underneath the yello ...

jqueryhtmlcssfancyboxfancybox-2

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

cssopacity

Transforming React drag and drop page builder state into a functional html, css, and js layout

Currently, I am in the process of developing a drag and drop UI builder for react-based app frameworks. Before incorporating drag and drop functionality, my main focus is on rendering a page layout based on a structured array stored in the state. https:// ...

javascripthtmlreactjsdrag-and-droprender