In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect.

To solve this problem, I added a background color to the overlay div with 0.1 opacity. However, when working with sortable items in my container, the form elements behave strangely especially during sorting (especially when applying opacity option on jquery sortable).

Example Code:

<div class="sort">
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <input type="text" value="Some" name="test" id="test" />
    </div>
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <select value="Some" name="test2" id="test2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
</div>

CSS:

.cont {
    width: 300px;
    position: relative;
    background-color: #aaa;
    padding: 10px;
    margin: 10px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

Javascript:

$(function() {
    $('.sort').sortable({opacity:0.8});
});

Check it out live on http://jsfiddle.net/CmU59/4/

Are there any other suggestions for a workaround?

Answer №1

Have you ever thought about using a completely transparent 1x1px PNG as the background for your overlay on form elements?

Answer №2

Choosing a background:url(about:blank) might be the way to go~~

Answer №3

If you simply add

background: url(image/url.jpg) no-repeat -999px -999px;
and eliminate opacity...

I recommend utilizing a small image, but not a 1x1 pixel... 1x2 would work better... see example here

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

Error: Unable to access the 'resource' property as it is undefined

I am currently working on a project that involves fetching the latest 4 results from Craigslist using a query. Although I have successfully retrieved all the relevant information, I seem to be encountering an issue with loading the URL of the image from th ...

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Encountered a strange issue with the fixed header on my website under specific conditions: Using an iPhone 6+ in landscape mode. Using Safari with at least two tabs opened. The page has a fixed position header with html and body set to position: relative ...

Flexbox can be incorporated with a slide down animation to create

Currently I am attempting to replicate the "slideUp" and "slideDown" features in jQuery while utilizing a flexbox for display! jQuery.fn.toggleFlexbox = function() { var elm = $(this[0]); if(elm.css('display') === "none"){ elm.cs ...

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

Ways to ensure that the ul navigation bar spans the entire bottom of the page evenly (without resorting to using table

This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it. My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the en ...

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Recently, an error message has been popping up in Vue 3 regarding the use of ::v-deep. The warning states that using ::v-deep as a combinator is deprecated. Instead, it recommends using ::v-deep(<inner-selector>) Here is an example of the CSS ...

Troubleshooting: Issues with MagicSuggest's dependent multiple dropdown functionality

Currently implementing MagicSuggest for a custom dropdown feature with two dropdowns: category and subcategory. The goal is to have the subcategories populate based on the selected category. However, after selecting a category and then a subcategory, if ...

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

The functionality of JQuery is not effective when trying to retrieve a radio button value within a partial view

Trying to extract a value from a radio button to toggle another component in a modal popup. I attempted to accomplish this by including JQuery code in a partial view within the modal popup, but unfortunately, it didn't work as expected. Interestingl ...

jQuery Mobile hyperlinks are malfunctioning despite having identical coding

I'm facing an issue with my jquery mobile site where some links are functioning correctly while others are not. The links for the top logo, "Bundle", and "Legal Disclaimers" don't seem to work even though they are all coded the same. If anyone ca ...

Automatically update div content using jQuery including an AJAX request for loading

I have successfully implemented a method for loading output from now_playing.php (shoutcast now playing content) using a jQuery include ajax call, as recommended in this answer on Stack Overflow. Here is my code: <script> $(function(){ $("#now_ ...

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

I am experimenting with a unique combination of a Pure CSS in-page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, along with a sticky header for in-page navigation. By utilizing IntersectionObserver, I can identify when t ...

Creating a minigame using JQuery (Javascript)

I am currently developing a collection of mini-games for my big project. The approach I've taken in creating this mini-game is similar to one I used previously. However, unlike my previous version which only had one PuzzleContainer, this new iteration ...

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Can someone explain to me why my absolutely positioned element is displaying after my child_static div? I'm under the impression that absolutely positioned elements are removed from the normal flow. So why isn't child_absolute covering the child_ ...

What is the proper method for utilizing colspan within the footerData of a jqGrid?

Are you looking to customize the footer of your jqgrid as shown in the example below? I am trying to set up a custom footer for my jqgrid similar to the one displayed above. I have already enabled the footerrow:true option and used $self.jqGrid("footerDat ...

What is the best way to ensure that less2css compiles all files after saving just one less file?

In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...