All geek questions in one place

IE7: element showing even with display: none

I am trying to hide the “requested” message when the page is first displayed. In FF and IE8, this works, but for some reason the message is displayed in IE7.

Here is the HTML:

<div id="passwordDivRequired" class="requiredMsg"> <img src="images/required.png" /> Required </div>

And here is the CSS:

 .requiredMsg img{ width: 1.5em; height: 1.5em; position: relative; bottom: -.4em; } div .requiredMsg { color: #BF5754; display: none; }
+4
source share
2 answers
 div .requiredMsg

Selects any element with a class attribute that contains the word requiredMsg, which is a descendant of the div element.

- http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

Get rid of the child selector (space).

+9
source

David Dorward undoubtedly had the right answer to this particular problem, but for completeness, there are two (at least) other IE <= 7 specific reasons for displaying an element when hidden in other browsers:

1) It is described perfectly here: http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm To give a basic meaning, this can happen if your element is hidden after loading the page in a container that is dynamically hidden and then shown . There is more information, a great demo and some corrections on this page.

2) Another more rare, but possibly related IE7 failure: the “Display: Block” element (set by CSS) indicates that it is inside the 'Display: None' element (set by javascript) 'div', while the others children without the set "Display" does not appear as expected. The container in this case was the "Position: fixed" div (also set by JS), and the child was an anchor ("a"). For me, the only thing that fixed this was to restructure my application logic so that “Display: None” is applied in CSS before the page loads, and not after Javascript. This worked even when the display was switched using javascript later.

In general, IE <= 7 seems to confuse display inheritance issues when content is hidden after the page loads.

(feel free to edit)

+5
source

Source: https://habr.com/ru/post/1310996/

More articles:


All Articles