Bang IE7 - What Does It Mean

Bang IE7 - What does it mean?

I have heard of this before, but not with the exact text !ie7.

I found a reference here: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

!ie

Internet Explorer 7 fixed one of the
issues with the !important identifier,
but it still has problems when the
identifier has an error in it. If an
illegal identifier name is used in
place of important, Internet Explorer
7 and below will handle the property
normally instead of failing.
Therefore, in any style declaration
block, you can include properties
intended to only apply to Internet
Explorer and add an !ie identifier.
Almost any word can be used in place
of ie.

The !ie identifier allows the property
to be applied in IE 7 and below. It
may or may not work in future
versions. Warning: this uses invalid
CSS!

So, width: 650px!ie7; will be applied in only IE 7 and below.

The actual text ie7 is not required, but it's a sensible string to use, to remind people of the purpose behind the hack.

What does !ie7 do in this style?

In your example it means padding-bottom:15px will only work in <IE7 and not any other browser. The property referenced with !IE7 means it will only work in <IE7. Try it out in the link i provided below and view it using different browsers. I have !IE7 on the border property. So border will only show if browser is IE7 or below.

See working example at http://jsfiddle.net/qGv4P/

!important or !notimportant in IE6 and 7?

That is correct. IE6/IE7 incorrectly treats ! followed by any identifiers and whitespace as an !important token instead of completely ignoring the declaration. Some references:

• http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
• Bang IE7 - What does it mean? (with an example of !ie7 on this very site as well as a link to the above reference)

The spec states that ! can only be followed by case-insensitive important with optional whitespace and comments separating them for it to be recognized as an important declaration. You can see this in the grammar:

"!"({w}|{comment})*{I}{M}{P}{O}{R}{T}{A}{N}{T}  {return IMPORTANT_SYM;}

So while these are valid important declarations:

background: transparent !important;
background: transparent !IMPORTANT;
background: transparent !ImPoRtAnT;
background: transparent ! important;
background: transparent !   important;
background: transparent !   /**/important;
background: transparent ! /**/ /**/ important;
background: transparent !/**/important;

These are invalid and should be ignored (don't even try to apply the background):

background: transparent !notimportant;
background: transparent !NOTIMPORTANT;
background: transparent !NoTiMpOrTaNt;
background: transparent ! notimportant;
background: transparent !   notimportant;
background: transparent !ie7;
background: transparent !abc;
background: transparent !_;

But IE6/7 will treat them all like valid !important statements and apply the background. IE8 and later will correctly ignore them, although this may or may not be reproducible in those versions in Compatibility View.

Note that while the Jigsaw W3C CSS Validator reports !/**/important as invalid (! immediately followed by a comment instead of whitespace), that is a bug with the validator parser. It's definitely valid according to the grammar.

IE8 vs IE7 html formatting

If you put !ie7 after the width attribute, it will be ignored by browsers other than IE 7:

right: 425px !ie7;

For a better explanation of this, see this SO question and the accepted answer:

Bang IE7 - What does it mean?

I leave it to you to decide whether this is too 'hacky', but it is used in the Stack Overflow css.

CSS Compatibility IE7 - IE8 problem

As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.

One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.

BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.

ie7 display:inline

It seemed that I needed to make almost everything have a position:relative, display:inline, zoom:1 for internet explorer ie7.

Ya know, when GM makes a bad product, they do a recall. Why won't Microsoft do a recall on IE6 and 7?

jqGrid IE7 hover nightmare

I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.

Why does my page work in IE9's IE7 mode, but not in IE7 itself?

I don't know about IE9's IE7-compatibility mode but the IE7-compatiblity mode built into IE8 is well known for not being a perfect copy of a real IE7. It has a large number of bugs and quirks of its own which do not appear in normal IE7.

It was bad enough that I would never have recommended anyone to actually use compatibility mode to test their site... except that you still need to cope with the occasional user who is actually using compatiblity mode on their live browser. So rather than making things easier for the developer, MS actually made things harder for us by adding yet another possible rendering engine to the mix which. Sigh.

I haven't tried IE9's compatibility modes, but if your experience is anything to go by, then they've still got the same problem. It's a shame (but not surprising) that MS didn't learn from the first time they made that blunder.

Rather than using compatibility modes to test, the best solution I know of is to use an application called IE Tester, which allows you to install and run all versions of IE alongside each other. It's still not perfect (the only way you'll get perfect, as you've already discovered, is to have a real IE7 on its own real copy of XP), but it is much much closer to the real thing than IE's own 'compatiblity' mode.

Jquery show hide not working in ie7

Whole issue is because of your HTML markup.

use this

<div style="" id="25294" class="pane">

     <ol>
                         <li ><span class="question">Question 1 </span>  <p class="answer">
               Answer1</p>

              </li>

                         <li ><span class="question">Question 2</span> <p class="answer">
               Answer2
            </p>

              </li>

          <li ><span class="question">Question 3</span> <p class="answer">
               Answer3
            </p>

              </li>

         </ol></div>

Checked in IE7 (Compatibility mode works fine) - updated fiddle: http://jsfiddle.net/qJBhD/12/

---

Related Topics