In Internet Explorer 7, z-index 1 does not display correctly

I am trying to apply z-index: -1; to a div with the class "ie7" that is positioned relative. This div is nested within another div that is also positioned relative. It seems to work in all IE browsers except for IE 7. Any assistance on this matter would be greatly appreciated...

<div class="category group closed">

    <div class="group_description">
        <h2>Lorem ipsum</h2>
        <span>Lorem ipsum...</span>
    </div>


    <div class="asset_link">
    <a class="video_link" href="#">
        <img class="avatar" src=""/>

        <div class="text_content">
            <div class="text-inner">
                <h3>Lorem ipsum</h3>
                <span>Lorem ipsum...</span>
            </div>  
            <h4 class="name_title">John Doe</h4>
        </div>
    </a>
    </div>



    <div class="not_available"><h1>This session is not yet available</h1></div>
</div>
</div>

CSS: 

.group_description {
    margin: 30px;
    width: 843px;
    overflow: hidden;
}


.closed {
    background: url('../images/not_available_bg.png');
    z-index:auto;
}
.closed .group_description,
.closed .asset_link {
    position: relative;
    z-index: -1;    
    *filter: alpha(opacity=40);
}

.category.group.closed .not_available {
    display:block!important;
    background: #79c7d4;
    width: 491px;
    height: 110px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -245px;
}

.category.group.closed .not_available h1 {
    color: #fff!important;
    width: inherit;
    position: absolute;
    margin-top: 40px ;
    text-align: center;
    *margin-left: 35px;  
}

.asset_link {
    margin: 0 auto 30px 30px;
    width: 407px;
    height: 116px;
    float: left;
    overflow: hidden;
}

.asset_link img.avatar {
    width: 110px;
    background: #e7e7e7 url('../images/avatar.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    float: left;
}

.asset_link .text_content {
    background: #f4f4f4;
    margin-left: 2px;
    width: 293px;
    height: 100%;
    float:left;
}

.asset_link .text-inner {
    margin: 15px;
    height: 60px;
    width: 260px;
    word-wrap: break-word;
}

h4.name_title {margin-left: 15px;font-size: 11px!important;}

Answer №1

This issue seems to be related to nested elements and how Internet Explorer 7 handles the z-index attribute.

Check out this article for more information:

Answer №2

There is an unresolved z-index reversal bug in IE 7.

If you are using jQuery, you can implement this solution to resolve the issue:

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

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

Is there a way to simplify and optimize the code further?

Here is the code snippet from my index.blade.php: HTML @foreach($sesis as $sesi) <td>{{ $sesi->waktu }} <label class="switch switch-text switch-info switch-pill" id="label-switch{{ $sesi->id } ...

Remove the pop-up using its unique identifier, element, or style class

I recently launched a free hosting site, but I'm encountering an issue where an ad for the site keeps appearing upon loading. I need to find a way to remove the specific rows that contain this ad. Specifically, I want to delete the ****BOLD**** rows, ...

The jquery cookie plugin appears to be failing to delete cookies

I included jquery cookie plugin from . However, when attempting to remove the cookie, I encountered the following: $.cookie() Object {IntApp_prpl1115: "soapB9ACC84D2F8F9F15B110049BBA948D37&iwk OVEoOoMWr….161:8081/nexus/index.html&projects.proj ...

Calculate the number of parent nodes and their respective child nodes

I am curious about how I can determine the number of children nested within parent-child relationships. For example: const parent = document.querySelectorAll('.parent'); parent.forEach(el => { const ul = el.querySelector('.child3-chi ...

Issue with Carousel Slide in BootStrap 5.0 beta 1: Unable to function properly

Why won't my carousel slide properly? It just switches to the next item without any sliding transition. I've read through Bootstrap 5 documentation, but it doesn't work there either. Has the slide transition feature been removed? HTML: < ...

Chat lines in Chrome displaying double entries - troubleshooting needed

I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...

PHP and AJAX for streamlined login form experience

Trying to log in through a popup login box using AJAX to determine if the login is successful. If successful, redirect to the header location, otherwise display an error message. Here is the code snippet: <script> $(document).ready(function () { ...

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Hey everyone! I'm a beginner in web development and I'm struggling to understand why the event "OnKeyDown" is triggered the second time. My task involves changing (increasing, decreasing) parts of a date (day, month, year, hour, minutes, seconds) ...

Load datepicker function using jQuery append

I created a function that generates input fields with unique IDs and names based on the current timestamp. I want to add a datepicker to each generated field with a unique/timestamp ID. Anyone have suggestions on how I can achieve this? I think the datep ...

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

When I click on a checkbox, an animation is added to a div. However, I am struggling to remove this animation unless I click elsewhere on the document. The goal is for the checkbox to both add and remove the class. JS $('#inOrder').click(functi ...

Set up a jquery code that ensures a loading effect will only be displayed one time

After clicking on a specific icon, I dynamically add a loading message to the DOM. The issue arises when the user clicks twice, resulting in two instances of the loading message appearing simultaneously. How can I ensure that only one "loading..." message ...

Tips for extracting HTML entities from a string without altering the HTML tags

I need assistance with removing HTML tags from a string while preserving html entities like &nbps; & é < etc.. Currently, I am using the following method: stringWithTag = "<i> I want to keep my ->&nbsp;<- element space, bu ...

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

"Enhance your website with the dynamic duo of Dropzone

Currently, I am utilizing dropzone.js and loading it through ajax. I have assigned my menu ID as "#menu". The uploaded file should display in "#div1". Unfortunately, the callback function is not functioning properly. In an attempt to troubleshoot, I repl ...

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

What is the best way to adjust text across several lines to perfectly fit within a div's width?

http://codepen.io/anon/pen/oXGMQZ Is there a way to automatically adjust the font size of each span within a parent div so that it fills the width of the parent div? <div class="box"> <span class="fit">what</span> <span class="fi ...

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

Twists and turns as I mix up Kineticjs

After scrambling my puzzle, I now need it to be rotated. Can anyone help me with this? Thanks :) fillPatternImage:imageObj, x:-pieceWidth*i/2, y:-pieceHeight*j/2, stroke: "#000000", ...

How to properly align an object in a specified ul, li list

I'm currently facing an issue while building a Joomla site. I have set a background image for my li elements, but the items within the li are not centered as expected. The website I am working on is www.outlawsofhealth.com. The specific list in quest ...