I have an element that is set to display none on page load. When you select a number from a select list the element is shown with jQuery. This works fine in all browsers except in IE7.
In IE7 everything is laid out correctly if I disable JavaScript. However with js turned on (and then the element shown via the select list) the legend appears in the wrong place. If with the developer tools I change the width of the fieldset and change it back to the original value, then it displays correctly.
So it seems like its some sort of rendering issue for hidden elements in IE7. If I add this CSS it messes my site but it fixed this particular issue.
* {
position: relative !important;
}
Adding a class which is hidden with css rather than adding display none as an inline style fixed this.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I am working on a chrome extension that would display an overlay over any tabs the user is working on. I need it to operate within the full viewport.
I'm using vanilla javascript and content script to inject a full viewport-size div (to the body since I want it to be used on any website) and then append my template to the div I created and injecting them with Angular. It works very well.
The Problem
However, this overlay is somewhat blocking since the div I create has to have a z-index of at least 0 to be seen. Let's imagine you perform a google search, you will be able to search since the google search bar has z-index > 0 but you won't be able able to click on the results ... The problem appears in pretty much any website.
Now I tried to play with z-index: I apply z-index = -1 so I won't see the main overlay div but the problem with that is that the content I append to it seems to inherit the z-index -1 no matter what so I never see my template!
I've followed quite some topics here but I didn't find an answer to my problem!
The Question at last ...!
How do I create a non-blocking chrome overlay ? :)
Remember: I need to be able to interact with the overlay at any given moment, not simply when I click on the icon related with the BrowserAction!
The trick is simply to add the css property
pointer-events: none;
to the main div and
pointer-events: auto;
to the template
I'm having a display problem with an absolute positioned div in IE6 + IE7
I'm trying to display a drop down menu. this drop down menu is positioned absolute.
now as soon as there's another element below this menu that has position: relative, the absolute positioned drop down menu is displayed behind it.
this only happens in IE7 and 6 as mentioned above.
any ideas on how to fix this?
The css property z-index is there to let you define what object should be displayed "on top". Define z-indexes for all elements in quest (only drop-down should also work I think).
EDIT (based on provided code):
The element to give the z-index property to is "the topmost element with a position attribute that the overlapped div is not part of. In terms of your sample, give the z-index to menu_container or add it to header and give header position: relative (I like the latter option better because it is less likely to break with future changes of your html).
As for an explanation why this is so, in IE6 and IE7 things work as follows: currently absolute_div is above everything inside menu_container, but menu_container is below relative_div, so absolute_div is too. The reason that header doesn't participate in this story is that if no position attribute is given, what is displayed in front and what is in the back is calculated differently.
For the following sample ordered list markup and CSS, IE7 is rendering the numbers alongside the bottom of the list item, whereas FF, Safari and Chrome are behaving as desired, with the numbers aligned alongside the top of the list item.
http://bit.ly/aCq5F5
Does anybody have any suggestions as to how to get IE7 to render with the same results? (Other versions of IE haven't been tested yet.)
Add
vertical-align: top;
to the li
Try removing the height you're setting on DIV.list-item-contents.
If its spacing you're after, try adding margin-bottom to them.
I am trying to call one div on click of select element. there are 4 select elements two in each row. When that div is called it goes behind the succesive select element. This issue is specific to IE7. It works fine with IE8 and firefox3.
please can anybody help...
Thanks,
You can read the following link for a detailed info
How the Z-index Attribute Works for HTML Elements
There are two work around for this.
The first is to hide the select element when the div appears. This might not be a good solution.
The other better solutions is to place an iframe at the same position as that of the div.
The iFrame must be added at the end of the page so that it appears in front of all other windowed controls (the windowed controls are stacked in the order in which they appear on the page). That takes care of covering any SELECT that may be in our way.
You can have a look at the code in the page
Bug Fix: SELECT box displayed through Dynamic DIV in Internet Explorer