IE7 Bugs and Fixes, Part I
Reader Adam Engelsgjerd writes:
I develop and maintain websites for the University of Arizona Library. We make use of the “Holly Hack” to avoid the IE6 peek-a-boo bug for our intranet site (God bless Holly). In the course of testing our sites against IE7 I noticed that the bug was rearing its head again‚ despite claims that this latest version has fixed it.
Further investigation revealed that while IE7 really does seem to have fixed this peek-a-boo bug the Holly Hack has, with decidedly sardonic irony, reintroduced the very problem it was created to circumvent.
This morning I tested and just implemented a fix that seems to work for us: the removal of the universal selector, “*‚” before the “html” selector. So the traditional Holly Hack is:
/* Hides from IE5-mac \*/
* html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
Our new code is now:
/* Hides from IE5-mac \*/
html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
I’ve tested this against the following browsers on Windows XP SP2:
IE7
IE6 (SP1 standalone install from evolt.org and SP2 full install)
IE5.5 (standalone install from evolt.org)
Netscape 7.2 and 8.1
Opera 7.11 and 8.54 and 9.00
Firefox 2.0
And on Windows 2000 SP4:
IE6
Hopefully this can be of some use should others be running into this same problem.
Tags: css, browsers, IE7, bugs, hacks, workarounds, holly hack
Isn’t the use of the * html selector meant to hide the Holly hack from standards compliant browsers?
I mean, if you remove the asterisk, as soon as your parent node has some height, browsers that don’t auto-expand the box like IE6 will make your DIV shrink to 1%…
The sample code works for them in Gecko because #contentWrapper probably is the main container DIV and its height is computed in relation to the BODY’s height, which is a very special case. As son as you add html,body{height:100%;} the whole layout collapses to a few px height.
… Or, probably, am I missing something obvious?
I’ve said it several times and I’ll say it again: conditional comments.
Am I missing something? It seems all you’ve done is removed the hack.
html #contentWrapperis a perfectly valid ruleset, no? Which means, you could have dropped thehtmlpart as well. And all you’re really doing is forcing hasLayout, I imagine. In which case, I’ve been usingzoom:1to do so (also handy for clearing floats, which is mostly what I use it for).I’ve got to go with Paul there.. I’ve been using conditional comments for a good while now and have been very thankful for it. Only a couple of websites I’ve designed using ALA’s In Search of the Holy Grail layout are affected by the switch to IE7, and it should be an easy fix.
Thanks to Conditional Comments!
Why are people still extolling hacks?? I don’t understand.
I can’t believe at this day and age we’re still hailing Holly has our dear Saviour.
I’d recommend a good read on hasLayout instead- properly understanding WHY such layout quirks happen and effectively fix things, instead of shooting in the dark, hoping something will “work”.
Removing the universal selector from * html #contentWrapper selects all instances of “#contentWrapper” child elements contained in html, in all browsers anyway- so why not add height: 1% to your #contentWrapper style rules instead? The * html “fix” was used to target IE exclusively. Removing it makes this kinda pointless.
Also, using height: 1% is not without its own set of side effects.
David Hammond’s excellent (and free) site is a much better resource. I’m kinda disappointed the great Zeldman would post such a weak “fix”.
Jeffrey,
Yes, IE7 still has a few of the old bugs (and a few new ones!), but the better method I’ve found for attacking the peek-a-boo bug in IE7 is to use min-height to trigger “hasLayout” which effectively kills all of the same bugs that the holly hack does.
Essentially you can leave your Holly Hack alone and just add min-height in your main declaration, as in the following:
#contentWrapper {min-height: 1%; etc. …other style rules}
/* Hides from IE5-mac \*/
* html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
FYI, min-height: 1px; also works.
It works because all the compliant browsers understand the min-height declaration, but it doesn’t put any constraints on height, and therefore doesn’t interfere with the proper rendering of the element you’re targeting. What it does for IE7 is trigger “hasLayout” in the same way the Holly hack works (and no, min-height does not trigger “hasLayout” in IE5.5/6 - already tested).
So I’ve taken to leaving my IE5.5/6 hacks as they were, and fixing IE7 in the manner I outlined above.
i may be a little off-topic here (or not) , but wouldn’t it be better for developers to STOP supporting Internet Exploder in their CSS specs, simply developing in the NORMAL way, the standards way … Personally, I’m terribly sick of this ghost to force me spend a lot more time on making the so-called “browser” to interpret my stylesheet correctly than i had to design and code the “normal” specs …
You may come and jump on me saying What can we do, it’s the most used internet navigation tool on Earth … but I say: Why should the world dance as Microsoft sings ? Why can’t we simply let the websites or web applications that we build to render in IE … the IE way ? Let the world see the truth (and not what you work hard on to seem like the truth… ) and let them know that there are alternatives ! This way, the Microsoft team may (or may not, according to their level of interest for their consumers) discover that the problem is serious and take REAL measures about it…
N.B.: scuse my bad english, it’s not my native language :)
Marcus that’s a nice idea in theory except for the fact that clients might have problem with it.
Billh ,
I’d say that the clients should be educated about this issue, with solid arguments (the fact that is, IE is holding the progress and creativity in it’s place, or at least makes our lives a lot more “miseryful” than we’d like) …
The hell with their product, the fact that they put some stitches to a piece of garbage doesn’t mean it got a good product… I wasn’t surprised to hear that even now, at IE7 , after they’ve tested it quite enaugh and some initial beta releases, it still fails to do what it was supposed to do: browse websites ! I mean, what the heck, after all…
I’ve told my clients (those whom i’ve noticed using Exploder) about the IE issue and trust me , i’m not trying to sell any bull$hit to anyone, but they “surprisingly” understood and followed the link I gave to browsehappy.com … and yes, they live happily now, thanking me for showing them that there is more than the crappy IE on this world :)
Best of luck
I’m with Paul and Alex. Are we missing something? Why are people still talking about hacks - surely conditional comments provide an elegant and 100% future proof solution for feeding different rules to different versions of IE? Are people just so used to their beloved hacks that they can’t bear to abandon them? Please explain…
OUCH…we’re STILL worried about IE5 for Mac? YIKES. Time to let it go, folks. Let that piece of sh_t break for all you care. This is the “how long should we continue to support Netscape 4?” argument all over again. Enough already.
As for anything else…IE’s conditional comments are the way to go.
I agree with Dino. IE5/Mac is now a thing of the past, and is in the same body bag as Netscape 4.
For the sake of accessibility, I use the
@mediarule in an imported stylesheet that will let the users access textual content, while IE5/Mac is blinded and dosen’t display any CSS.Unless you’re being paid vast sums to do websites, screw all the silly hacks. Do what it takes to make it look decent in the new version of browsers and forget the rest.
I appreciate the spirited discussion! As a developer, I’m envious of those of you in the position to let all but the latest and greatest browsers fall to the wayside. Given my user base and content, however, I have to make sure that our site is as uniformly accessible as possible across a myriad of older browsers. (I suspect I’m not alone in that regard).
I look forward to investigating alternate solutions (such as Michael’s IE7 “hasLayout” and the numerous suggestions of IE conditional statements).
-Adam
[...] New popular sites (Just new in last 24h). Jeffrey Zeldman Presents : IE7 Bugs and Fixes, Part I [...]
When employing the Holly Hack, I’ve used the following method:
div#container {height: 1%;}
html>body div#container {height: auto;}
By resetting height to auto for browsers which probably don’t need or want the Holly Hack (including IE7), it neutralizes the potential side effects better than use of the *html hack.
In cases where HasLayout still isn’t being applied in IE7 when it should be, you could substitute:
div#container {height: 1%;}
html>/**/body div#container {height: auto;}
This will deliver the Holly Hack to IE6 as well as IE7, while again cancelling it for all other browsers.
I thought the peek-a-boo bug was fixed in IE7 - but I’d got the bad surprise to be confonted with it - I must say I got the IE7 RC1 version. I resolved it with the same method used with IE6 =>height:somenumber% or zoom:1.
What about using Firefox 2.0 dudes ?
[...] Jeffrey Zeldman: IE7 CSS tweak show and tell The first IE7 bugs and hacks are showing up, some good stuff in the comments. Also IE7 Bugs and Fixes, Part I [...]
Blimey, I’ve just re-read my comment above and realised that, basically, I came onto Jeffrey Zeldman’s own blog, and proceeded to give him advice about CSS.
Does anyone know any conditional comment syntax that can turn back time?
@Jonathan Nicol: Proprietary hacks are hacks too, and the conditional comment hack isn’t what I would call “elegant”. No other browser manufacturer tells everyone “our product is so busted you’ll just have to write and serve a whole extra stylesheet just to make up for it”.
If only they’d created a conditional comment *for CSS* I’d happily use their technique since it wouldn’t require maintaining double the number of stylesheets.
according to @donovan solution, IE7 won’t understand so floating value for width/height as auto, at least my didn’t. by applying hard value (%,em, px, etc.) especially to min-width/height i’ve banished peek-a-boo
also redefiniotion of width/height with auto !important rule to make element expandable for others than ie6 seems to be fine enought
[...] Re: Layout changes in I.E 7 help Look in your main CSS stylesheet. You have the following code: /* Might uncomment either or both of these if having problems with IE peekaboo bug: h1, h2, h3, h4, h5, h6, p { position: relative; } *html .centerColumn { height: 1%; } */ It looks like that’s a hack for the peek-a-boo issue in IE which gets broken with IE7. Check out the following article for a fix: http://www.zeldman.com/2006/10/27/ie7fixes1/ Of course, if it’s already commented out…Good luck! Last edited by Sueter : 30th November 2006 at 06:15 PM. [...]
[...] A post on Zeldman.com helped me figure this one out, and allowed me to specify rules using a modified Holly Hack. This declaration, also known as the Be Nice to Opera rule, targets Opera and Mozilla browsers, but all versions of IE skip over it, including IE7: [...]
I, like many of the other people who take the time to read Microsoft documentation instead of being blindly enraged by their long-time lack of support for proper CSS, extoll the virtues of conditional comments.
It’s ridiculous that they’ve been supported since version 5 and nobody seems to want to present them as an alternative, and still complain that their hacks break in IE 7. If you use conditional comments and specify versions in them, you future-proof your CSS against any mistakes in IE’s implementation. It allows you to far more easily and directly target naughty versions of IE.
[...] /* Hides from IE5-mac */html #content {height: 1%;}/* End hide from IE5-mac */ tak jak jest to opisane tutaj: http://www.zeldman.com/2006/10/27/ie7fixes1/ To rzeczywicie rozwizuje problem IE…_________________http://it.hk.pl | http://www.mnabialek.pl [...]
[...] and Fixes Jeff Zeldman publishes IE7 fix for the peek-a-boo bug 27-10-2006 to css, css bugs, ie 7, internet explorer bywalker [...]
A couple people here have mentioned conditional comments as being the answer to all. I used to think that until my copy of IE6 started reporting itself as IE7. Now the only way to target it is with the holly hack, because IE6 thinks it’s IE7.
If you install IE6 on a computer that is already running IE7, then that copy of IE6 will think it’s IE7. At least, that was my experience. This setup is probably pretty common among web developers. It makes using conditional comments useless, at least during development. The holly hack again becomes necessary.
I was able to fix IE7 peek-a-boo by
* { line-height: 1.3; }
and setting line-height is a good thing to do anyway…
See additional discussion here.
Do NOT install different versions of IE on the same computer, as some of their libraries will be shared. Get another computer, or run vmware player for a virtual machine running IE6. Hacks are evil. IE fixes some bugs but not others, IE7 is so different than IE6 we have to target specific versions - conditional comments is the only way.
Zoom: 1; applies haslayout and fixes a lot of things, and is future proof. I don’t care if it doesn’t validate, as validation is meant to be a tool to help you debug, not show off your work - your customers only care if the site works. Or put it in a conditionally loaded stylesheet if you are an idealist. Stamp the page with the browser version. Then in your css you can target one or multiple browser versions for style overrides right in the same stylesheet. If you are decent at css, you’ll find that the overwhelming bulk of your code works everywhere, with a very small amount override rules.
To the guy suggesting we don’t support IE at all - I feel sorry for your customers, most people on the internet will have problems with their site. As for NN4, IE5 on the mac, no one cares about them anymore, not even their makers. Let them die along with the bad memories.
thanks! those fixes helped a lot. i thought i was going nuts.
I’m afraid I have to agree with those calling for manhandling explorer a bit, if only from a purely economics standpoint. Our capitalist economy is built on the principle of the invisible hand. Poor business practices and/or products are supposed to result in a natural market correction away from those companies that produce them. Now I recognize that Microsoft has never been particularly keen on the notion of a free-market economy, though they don’t mind raking in the fruits of that economy, but to me it seems incredibly backwards that we actually find ways to help them along. I agree with the call to gently push our clients towards other, more functional browsers, but beyond this, it is worth recognizing what is supposed to happen – if users suddenly couldn’t access most pages because their browser didn’t allow them to, how long do you think that browser would be able to stay on the market? Isn’t that what’s supposed to happen?
The following code is an instance of the Holly hack. Primarily, the Holly hack consists of a set of hiding methods wrapped around that 1% height, which is the key to the hack. The whole idea is to let IE/Win and only IE/Win see that height and apply it to the buggy box.
/* Hides from IE5-mac \*/
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */
How come yours is
/* Hides from IE5-mac \*/
html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
It looks like your new code lacks the universal selector star before the html. The use of the universal selector preceding html, also known as the Tan Hack (or Star HTML Selector Bug), works in IE browsers and nowhere else. Thus, the reason for using the “Mac-hack” is to prevent IE5/Mac from seeing this height just as other browsers are, because it does not wrongly enlarge the box like IE/Win, but it does read the Tan hack. What really matters is that * html must always precede whatever target element is to be fixed, and that the * and html have a space between them, followed by another space, and then the target element.
Not easy to navigate, but a good list of resources for issues with browsers CSS guides and tutorials Clean and easy to read guides about CSS Articles and Guides on how to solve IE bugs How to figure out which IE bug you haveSome more current examples of how to solve bugs in IEReporting Bugs/Forums about Bugs Submit your finds, search for issues (quite comprehensive, very helpful) I hope these provide you with a great resource for figuring out those ridiculous Internet Explorer bugs. They have helped me.
Return of the Son of XHTML Fist Pardon Mon Oncle Patronizing Joe Clark Shiny happy people The Polling Place Photo Project An Event Apart Austin: Details, Details Monday breakfast links IE7 CSS tweak show and tellIE7 Bugs and Fixes, Part I
A solution is to add position:relative; to the containing div. It solved this issue for me. If you have any other solution feel free to post it! Other resources: http://www.brownbatterystudios.com/s..http://www.zeldman.com/2006/…