Comments on: IE7 Bugs and Fixes, Part I http://www.zeldman.com/2006/10/27/ie7fixes1/ Web design news and insights since 1995 Fri, 12 Mar 2010 00:24:57 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: IE7 design(?) problem: Upload doesn't show | SWFUpload http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-47279 IE7 design(?) problem: Upload doesn't show | SWFUpload Wed, 12 Aug 2009 13:32:35 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-47279 <!--%kramer-ref-pre%-->[...] it could be the peekaboo css bug to me. Might be worth looking into that, a basic solution is here: http://www.zeldman.com/2006/10/27/ie7fixes1/ Login or register to post comments January 22, 2008 - 3:46pm — [...]<!--%kramer-ref-post%--> [...] it could be the peekaboo css bug to me. Might be worth looking into that, a basic solution is here: http://www.zeldman.com/2006/10/27/ie7fixes1/ Login or register to post comments January 22, 2008 – 3:46pm — [...]

]]> By: Portrait artists http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-17601 Portrait artists Mon, 23 Jul 2007 02:45:32 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-17601 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. 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.

]]> By: jewellery http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-17400 jewellery Tue, 17 Jul 2007 22:39:06 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-17400 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? 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?

]]> By: Thomas http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-14737 Thomas Sat, 09 Jun 2007 09:11:57 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-14737 thanks! those fixes helped a lot. i thought i was going nuts. thanks! those fixes helped a lot. i thought i was going nuts.

]]> By: Chris Corrigan http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-14617 Chris Corrigan Fri, 08 Jun 2007 21:07:32 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-14617 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. 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.

]]> By: Tero Tilus http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-13415 Tero Tilus Tue, 22 May 2007 13:06:51 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-13415 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 <a href="http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/b740dd72beffcf5c/5949edd5254a94db?&hl=en#5949edd5254a94db">here</a>. 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.

]]> By: R Cramer http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-8569 R Cramer Tue, 20 Feb 2007 20:24:08 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-8569 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. 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.

]]> By: Scuttle: Tags: internet explorer http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-8263 Scuttle: Tags: internet explorer Tue, 13 Feb 2007 20:17:54 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-8263 <!--%kramer-ref-pre%-->[...] 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 [...]<!--%kramer-ref-post%--> [...] 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 [...]

]]> By: Forum Wielotematyczne KasArt98.com http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-6711 Forum Wielotematyczne KasArt98.com Sun, 31 Dec 2006 13:27:16 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-6711 [...] /* 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 rzeczywi¶cie rozwi±zuje problem IE…_________________http://it.hk.pl | http://www.mnabialek.pl [...]

]]> By: Michael Hoskins http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5729 Michael Hoskins Fri, 01 Dec 2006 21:41:05 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5729 I, like many of the <a href="http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/" rel="nofollow">other </a> <a href="http://www.killersites.com/blog/2005/css-hacks-are-stupid/" rel="nofollow">people</a> who take the time to read Microsoft documentation instead of being blindly enraged by their long-time lack of support for proper CSS, <a href="http://verbose.pixelbath.com/2006/11/01/stop-using-css-hacks/" rel="nofollow">extoll the virtues of conditional comments</a>. 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. 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.

]]> By: markhealey.net » To you, IE7. And only you. http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5723 markhealey.net » To you, IE7. And only you. Fri, 01 Dec 2006 18:39:16 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5723 [...] 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: [...] [...] 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: [...]

]]> By: Layout changes in I.E 7 help - Zen Cart Support http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5713 Layout changes in I.E 7 help - Zen Cart Support Fri, 01 Dec 2006 14:07:59 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5713 <!--%kramer-ref-pre%-->[...] 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. [...]<!--%kramer-ref-post%--> [...] 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. [...]

]]> By: Konrad http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5347 Konrad Wed, 22 Nov 2006 11:48:43 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5347 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 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

]]> By: Ben Buchanan http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5240 Ben Buchanan Thu, 16 Nov 2006 22:44:43 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5240 @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. @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.

]]> By: pauldwaite http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5231 pauldwaite Thu, 16 Nov 2006 19:18:04 +0000 http://www.zeldman.com/2006/10/27/ie7fixes1/#comment-5231 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? 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?

]]>