When Browsers Attack!
Published 20 years, 3 months pastRemember my recently posted conversation with Molly? Boy, am I ever feelin’ that today. In spades.
Some of you have noticed earlier today that things were presentationally unstable. Depending on when you dropped by, you would have seen raw document presentation with no author styles at all, or some chunks of the site’s usual styles but not others, or all of the usual styles with a few oddities thrown on top for good measure. For a few hours, during which I had to attend to something else, the site was fine except that in IE/Win, the main content column was quite a bit wider than usual, and some bits of content were visually exceeding the edges of the design box. All that was happening because I was turning styles on and off in an attempt to stop freezing Internet Explorer for Windows.
Freezing? Oh, yes. As in locking it up so that people had to use the Task Manager to force-quit the process. There were probably a few reboots out there as well; there were at least a couple here in Casa de Meyer. Ordinarily, I’d apologize. Not this time. If you want an apology, try finding the person or persons responsible for IE’s CSS handling, and demand an apology from them. I’m not taking the rap for this.
To set the stage, let me back up a couple of days. As I passed by Kat’s office, she called out, “Hey, how come my browser keeps getting screwed up?”
“Because it’s Explorer,” I said. “Next question?”
“Ha ha. Seriously, every time I try to view your ‘ten things to do in Cleveland‘ post, the computer crashes. I think there’s something wrong with it.”
Grumbling, I wandered over to her computer. Sure enough, the browser was completely frozen. She’d already called up the Task Manager and was forcing the browser to quit. She said it was the third time she’d had to do it. As I watched, the screen went blank, then drew the desktop color and stopped. The cursor appeared as an hourglass, and refused to change or even move.
Once the system had gone through a hard reboot, I fired up Netscape 7 and loaded up meyerweb. I surfed around to various posts. No problems at all. I then launched IE and loaded up the home page. No problem. I went to the offending post. Instant freeze.
After a few more invocations of the Fatal Freeze, I wandered out of her office again, muttering about Explorer and Windows and pondering the possibility that her computer had been infected with some kind of virus, malware, or other nastiness. But then, the next day, I got some e-mail reporting similar problems. Then Ian Firth managed to get a comment in about the problem on the post “Really Undoing html.css“, even though others were getting the Fatal Freeze on that very post. And he mentioned that it was happening in both IE and FeedDemon—which meant it was something in IE’s rendering engine, since FeedDemon just wraps itself around the engine. A similar report cropped up in the FeedDemon forums this morning, where it was mentioned that a similar problem had already been seen in the post “Standards Savings“. (Not that anybody had actually bothered to tell me, but hey, whatever.)
So I fired up VirtualPC this morning and tested the problem for myself. And sure enough, I was very quickly the latest resident of Lockup City. So I started narrowing down the cause. I’ll spare you all the nasty details (and foul language) of my bug hunt, and cut to the chase: the lockup was happening on entry pages where the post content included an element that used left padding. Blockquotes and lists were the prime triggers. There wasn’t an absolute 100% guarantee of trouble, but it was close. I could avoid the freeze by commenting out a single declaration in my main style sheet:
#main {
margin: 0 15em 0 0;
/* padding: 3em 4em 3em 4em; */
border-right: 1px solid #AAA;
background: #FFF;
min-height: 30em;
}
That’s why the content was running rampant earlier today. I had to leave that line commented out for a few hours. But I knew that couldn’t be the real cause, because it didn’t cause freezes on the home page, or even on monthly or daily archive pages. The freeze only happened on an individual entry page where there was a padding-indented element inside the content column. Thus, the source was most likely to lie in style sheet that’s applied only to post pages.
So I started digging through my entry style sheet until I narrowed the problem down to this line:
.prev-next {margin: 0; padding: 0.25em 1% 0;
float: left; width: 98%;}
If I commented it out, and uncommented the padding declaration from before, there were no problems. So the culprit lay somewhere in the .prev-next rule. Anyone want to guess at the cause? Go ahead.
Oh, all right, I’ll tell you. It was float: left;. As soon as I removed that declaration, the IE6 freezing problem just melted away. So if you’ve encountered freezes while trying to view entry pages in the past, you shouldn’t any more. (If you do, please comment on this entry with the exact browser and OS you’re using.)
The original point of the float statement was to get the unordered list to wrap around the floated list items within it, since floated elements wrap around floated descendants (for more details, see my article “Containing Floats“). Since that was apparently a recipe for disaster, I modified the rule to read:
.prev-next {margin: 0; padding: 0.25em 1% 0;
width: 98%; height: 1em;}
It isn’t exactly the same as what I was doing before, but the result is close enough for now.
What else might I have done? Well, in all honesty, I thought seriously about leaving things status quo and letting IE users go hang. I don’t cater to potential crash bugs in NN4, for example; why should I make an exception for another browser? But as I always knew I would, I grumbled a bit and then made an accommodation for IE. I may one day restore the float for more modern browsers and use some sort of hack to hide it from IE/Win, but for now I’ll leave things be.
What’s odd to me is that the styles involved in triggering this problem have been in place literally for months. If this was a problem, it should have arisen before now. Yet the first I heard of this freeze bug was two days ago, and then all of a sudden I was hearing about it from multiple sources. If I’d been updating my CSS, that would be understandable, but I wasn’t. So what happened? Did the installed Explorer population just get spontaneously and collectively buggier over the weekend, or what? Is there a subtle worm running around adding bugs to IE’s rendering engine? I’m really at a loss here.
As to why that particular combination of styles would cause IE to freeze up, I’m completely at a loss. Not a clue in the world.
While I was mucking around in the CSS anyway, I decided to see if I could fix the rendering error in IE/Win that made the sidebar hang out over the vertical separator. I did, so far as I can tell. The problem there was the “Exploration” box and the styles I’d applied to it. Apparently, if you set a form element to width: 95%; margin-left 5%; and then set a text input within that form to width: 100%;, it all adds up to something like 120%, or something. So I did a little bit of a hack to hide the input element’s width value from IE/Win. The input box won’t be as wide for IE/Win users, but as far as I’m concerned that’s an acceptable loss.
I hope your morning was substantially less frustrating than mine.
Comments (54)
Pingback ::
Photo Matt » Crash Internet Explorer
[…] Crash Internet Explorer September 16th, 2004 6:40 pm File under: Asides Eric Meyer discovers how to lock up a Windows computer using only CSS […]
Pingback ::
Very True Things - Conspiracy theory
[…] bots to act as they do has a real world counterpart in Windows Update. Meanwhile… Eric Meyer reports on a nasty bug whereby some CSS can crash IE. He wonder […]
Eric, if it’s only been showing up recently, is there a chance that this is the first post you’ve had containing those float: left elements since people upgraded to Windows SP2 ?
I know work was done on IE’s security features with SP2, but possibly they introduced a bug too. It’d be interesting to see if effected people were all running SP2 or not.
Regarding SP2: I was seeing lockups, but I haven’t installed SP2 in my Virtual PC images, because they’re all Windows 2000. And Kat’s machine is running on Windows 98. So I don’t think that’s the cause.
Oh wow, your site has occassionally crashed my news reader (SharpReader) for well over a month now. FYI, it relies on IE to render the pages I read. Giving you the benefit of the doubt, I assumed that it was a bug with SharpReader. There is a lesson in there some where.
Oh well, there went my theory.
I feel for you though, I had an IE only problem with my site very recently. It was reporting 404’s for URLs that worked perfectly fine in any other browser. I still haven’t tracked the cause further than ‘something’ in the style switcher, which I had to remove. *frown*
Kudos on tracking the cause of the glitch.
Nah no problems in SharpReader here, so must be something else Jason ;)
Incidentally, my morning wasn’t any better, so I feel your pain, man! My demons are of the J2EE kind, though. (this is the point where burst into Donna Summer’s She Works Hard for the Money, but a custom variant: He Codes Hard for the Money ;)
Well, I don’t have any problems as I use Safari :) but, it is nice to know that even Eric Meyer runs into a problem that just doesn’t make sense.
I saw the same behavior on the Cleveland post yesterday via Feedreader, another RSS aggregator that uses IE internally. I’ve not noticed it previously. However, I’m on W2K, so this is not an XP SP2 issue. However, the company has recently pushed the Windows Media Player 10 update to us. I wonder if that could be the trigger.
I think this problem can be boiled down to Kat using Windows.
Hmm. CSS that kills Internet Explorer? That will come in handy.
Matthew W. I have XP SP1a and it was locking up on me. In response to a later post by Greg V., I did have WMP 10 installed. That might have something to do with it. Another thing I’ve noticed is that RSSReader has stopped updating all the WP powered blogs in my blogroll. Very strange. The feeds validate, so I don’t know what’s up. I’ve temporarily switched to Feedreader and all is well.
I’ve often suspected alot of these things could be caused by updates released by M$. With the likes of auto-updates, while being great for the security of the adverage user, it always has carried the risk that this kind of senario could occur.
Frankly, I have nightmares about this kind of thing.
The company I work for had a Rich Text Editor fail in SP2, unfortunatly it was a critical piece of our product … it doesnt look good when this kind of stuff happens. Yet we have little warning of what the next batch of updates will do. It’s not like we can grab a nightly build or cvs snapshot and have a play.
Excellent detective work, Eric. But I have a question: Why is Kat using Explorer? I mean, I completely respect you for not imposing your preferences on her, but, wow, Eric Meyer’s wife uses IE???!!!! What’s next? Zeldman’s dog using the marquee tag? Hixie’s mom using spacer gifs? Dave Hyatt keeping a blog about Safari on Mozillazine? Oh wait, the last one is true.
(obviously kidding, relax everyone)
Thanks for the bug hunt. What about that padding of 1% on left and right? I ask, ‘cuz I have something similar going on, with similar markup, but so far only IE6/XPsp2. It doesn’t crash/freeze, but we see odd painting bugs when scrolling. Element loads correctly, scroll down and back up and the element is like 10px wider. Deleting the float seems to stabilize things.
(Very happy to use Firefox on a Mac).
I heard a guy on local radio talking about the Mozilla browser today. I want to solve a problem that could almost turn me into a te…ist! The problem is how to get “Shopnav” off of my computer because it pops up whenever I attempt to seach for stuff on the net.
The second part of my problem is this: Can any of you guys write a program that not only stops spammers, hijackers, adnausem, but give us poor slobs a WEAPONS SUITE that we can throw back down the net to SLAM THEIR AS…ES!!!!!?
I’m really a nice guy, almost a peacenik(yea, over 60), but If I ever get my hands on a tool with which I can fight off the HD space-thieves and home page hijackers, someone is going to know, electronically what “having their ass kicked and their names took” really means.
Sorry, Eric. This happened to me a month or two ago on your site but I didn’t see a correlation with your site as it normally works fine. I considered dropping you a line and letting you know, but I figured it to be some local issue, so I didn’t
I realise now, of course, that the freeze was probably caused by your site. But at the time, I had only accidentally opened meyerweb in IE due to a problem with my default browser settings (I normally use Firefox)
I’m on WinXP and I was always up-to-date with Windows Update, until lately anyway – I’m still considering SP2
Hmmm, looking back over my comments, all I’ve succeeded in doing is muddying the water. Sorry!
BTW, I managed to get my post in by posting it via FireFox :)
Still, I use IE5/5.5/6 for my main browser because 90% of my clients and customers do. I have to see what they see when I develop sites. I also haven’t had the time to try and got the Moz engine running in FeedDemon.
I also just installed WMP 10.0, but I don’t see any files in its distribution that would affect IE.
Sorry for the duplicate post in the post after this.
Oh my, I had exactly the same problem with float in a page of mine but in this case the whole content was floating and I think the problem had to do something with the big table in the floating DIV. I could not change my page’s design just because IE doesn’t work well though, so I used a PHP browser sniffer (which I personally hate but eh) and showed a link to an alternate page to IE users. Stupid IE…
Trackback ::
just to let you know
faulty MS IE rendering leads to crashing & freezing
I am very glad about Eric Meyer’s post regarding freezes on MS IE / Win due to a problem with the rendering engine. Strangely enough, I had similar problem, but only very recently. Changing the floating of some divs sorted…
Does anyone have a working demo of this?
Hi Eric,
I had a similar problem when floating images on a particular page in IE, which was once again totally random and only occured on some pages, not others.
I fixed it buy putting ‘position: relative’ just under the float command, that seemed to make everything work as before.
Not claiming to understand why though!
James
I know exactly how you feel. We have a problem with one stylesheet on our site, which worked flawlessly until the latest releases of the Gecko browsers. Now, on Windows only, on some machines only (and nothing to do with SP2), it fails to render some of the images and text.
I work on a Mac, and have a Remote Desktop Connection to an XP machine in the server room. If I use the machine directly, the site is fine – if I view it on RDC (which is a VNC like thing), it doesn’t work. It’s so random and arcane that we don’t even know how to report it as a bug. All the code passes W3C. So I have to find time to completely redesign that CSS …
u guys are clowns
When I looked at the eventual solution to this, I thought, “three shorthand values for padding isn’t legal”, but I’ll check before I point out to Eric that he omitted one.
Contrary to what I thought, both the CSS2 and CSS2.1 specs allow this (on padding, margin, and border-width).
Even Eric’s headaches teach me something.
I have run into two IE crashing CSS bugs before. I haven’t ever found a single cause for them; commenting out multiple different selectors seems to prevent the crashes. It seems like it’s an overflow or memory corruption issue.
In one of the two cases, I was able to track the problem down to my use of multiple selectors (e.g. <div class=”foo bar”/>). In the second, it was a
:first-letterindentation.In both cases, commenting out certain other, unrelated (not applied to the same elements) style would seemingly fix the problem, only to have it recur after a few reloads. Perhaps I was running into a caching issue as well?
No floats at all used on either of the sites these problems came up on. One used absolute positioning to generate a 3-column layout.
The crashes I got were simple IE crashes; Windows itself did not hang or otherwise behave unusually.
I may be able to work up a testcase if anyone is interested, as I think I have code which could be reverted to it’s IE-crashing state.
Just one thought – and I really hope I’m wrong on this… Try making float:left; the _first_ declaration in your prev-next class. I’m sure it _shouldn’t_ make any difference but I have known IE choke on elements just because they are declared in an order that IE doesn’t like.
That bad experience was when I inadvertently placed a ‘margin’ declaration as the last declaration in a style containing a float – completely freaked IE. I know there is a ‘correct order’ to such things but can’t immediately locate the correct reference. In my head at least, I think a ‘float’ declaration probably should be the first declaration.
Sadly, I no longer have the old code (it was a long time ago) and, frustratingly, I don’t seem to be able to replicate either this or your problem for testing purposes.
Just a thought.
Look at that rule:
.prev-next {margin: 0; padding: 0.25em 1% 0;float: left; width: 98%;}
I mean it should be clear, why it crashes, shouldn’t it?
Okay, this want-to-be-joke probably doesn’t work because English is not my native language. Forgive me guys. :-)
Thanks Eric for writing this up, even though I don’t know yet how to prevent this bug from showing up. But thanksfully I have not experinced this bug on my site so far.
I would be behind the theory of comment 26 …
I have a few sites that use float: left that do not crash IE6 (with or without SP2).
they are usually simple instances though:
.featured .image {
float: left;
margin-bottom: 10px;
}
which just affects few div with image in it, the other one
#content div.left {
width: 270px;
width: 200px;
float: left;
}
which sets the whole content column floating (this one contains the image one mentioned above)
Maybe it is a combination of the float with the element with it’s parent elements … who knows, it’s IE afterall.
Happy Safari and Mozilla user.
Microsoft just posted an update for IE 6.
for older windows systems.
http://www.microsoft.com/downloads/details.aspx?familyid=b0095851-674d-4357-868c-dd75d88405ec&displaylang=e
ile Name:
Security update for IE 6
IE6.0sp1-KB833989-x86-ENU.exe
Download Size:1069 KB
Date Published:
9/20/2004
System Requirements
Supported Operating Systems: Windows 2000 Service Pack 3, Windows 2000 Service Pack 4, Windows 98, Windows 98 Second Edition, Windows ME, Windows NT
This update applies to Internet Explorer 6 Service Pack 1 (SP1) with the following operating systems:
Windows Millennium Edition (Windows Me)
Windows 2000 SP3
Windows 2000 SP4
Windows 98 SE
Windows 98
Windows NT 4.0 SP6A
Version:
6
IE and float are a bit buggy. ‘display: inline;’ usually helps.
Try the following.
.prev-next {
position: relative;
display: inline;
float: left;
margin: 0;
padding: 0.25em 1% 0;
float: left;
width: 98%;
}
We had a similiar problem. After a few hours of trying to track it down it appeared to be a line dealing with display: none (which was definetly not the problem!)… so we researched….
After reading the comments on this site we solved the issue by removing all float: lefts. You probably saved us a few days of work… thanks!!!!
Pingback ::
TrumpetBoy » And as if by magic…
[…] ooner had I finished the last post than I headed over to Eric Meyer’s site and found this latest post bitching about Internet Explorer!! You see, it’s […]
I ran into this today. I tried both reordering and display:inline and neither helped. Sigh…
We have a Web page that crashed Internet Explorer everytime someone used File->Print or File->Print Preview.
We removed position: absolute; and our crashes stopped. The style-sheet may not have been optimized but I find it ridiculous that a Web page that is basically text (no weird applets or embedded objects) can cause a crash.
In my opinion the user interface for IE hasn’t changed since in 10 years and whoever is in charge of IE development should be thoroughly embarrassed. In fact, I am embarrassed at myself for having disregarded all the MS bashers for so many years. Try Firefox for a 2 weeks with extensions and you will understand.
Same here. Try it out. After randomly switching pages (after 8-10 clicks) on this site your IE6 will crash. mshtml.dll. Absolutely no idea why…
Just ran into a similar problem. A component on a page was set to float:left, and any number of these components could appear. The intended result was that these components (with declared width and height) would sit in rows of four, and drop onto a new “line” if more were added. It works great in Firefox (go figure). In IE it works fine too, when just a few of these components are being displayed. When we had 16 displayed, IE would load the page, but then freeze up the moment we tried to scroll down (with more than half of the components already showing “above the fold”).
I think the bug is only loosely related to the one you’ve experienced, but it was still a new one on me.
Very happy to find this. MS knowledgebase not helpful. This problem was affecting pages in IE6 that had divs with padding-left, but *only* on print and print-preview. I solved it by removing the padding for the elements in the print style sheet. Float:left was not a problem. I hope this information helps others.
whenever i open a hyperlink from the main page into a new window,
the “parent” IE window hangs if i close the “child” new window.
i have to terminate the parent IE window through task manager.
Any ideas guy y this happens. Is it a browser attack, or a bug in IE6.0 ? any remedies appreciated
I had a similar problem.
I suddenly started crashing.
But it was after some months of using.
We solved the problem. We removed the float element from the CSS.
Then i was just checking for articles on CSS making IE crash n i came across this. This is a too good article.
I tried to solve the problem and that process i literally crashed IE more than 100 times .
We solved the problem.
But i wondered why only with IE as MoZI didnt give the problem with same CSS? There is some problem with IE’s rendering Engine as ur saying.
Thanks n regards
satish Gaudo.
..had a similar problem..
the class
.test
{
width: 31.8em;
margin: 0 8.7em 0 2.4em;
float:left;
}
crashed the IE 6..
but after reading here we changed it to
.test
{
float:left;
display:inline;
width: 31.8em;
margin: 0 8.7em 0 2.4em;
}
and everything worked fine.. strange but nice..
I had a similar problem, it turned out that a class that was being applied to an anchor tag and contained the element ‘width:100%’ was causing the crash.
I’m a novice HTML’r and I’ve been using CoffeeCup to put a site together. All of a sudden I my links started strange behavior when Previewing. I thought it was CoffeeCup, so I tried the site (local HD)in IE6 and it did the same thing. So I tried my Version1 site from 3 weeks earlier that worked fine then & it did the same thing, just intermittently links would work and not work. I’m on XP SP2 (upgraded from SP1 online about a month or two ago). The only change I can think of is I upgraded Microsoft Media Player to 11.0 a week ago. But what could that possibly have to do with it??
Pingback ::
redemption in a blog - Finally, Bezurk and news.com.au co-brand is up and running
[…] thanks to a CSS bug in IE6, we were delayed by a week. The last thing we expected was a CSS bug hanging IE6 but yeah, well, it […]
Hey, glad to find this article. I just built a website with 3 pages of 31 crashing IE 6. All 3 pages use the same stylesheets (but different from the other 28 pages) with graphic buttons within <li> and <ul>. The list items were float: left; so i deleted that line and all went fine on 2 of the 3 pages. I didn’t check the 3rd.
But now: I checked against it and inserted the float: left; back again. Restarted IE, cleard cache (and cookies), and the two pages i tested before are still running fine, but on the 3rd page, IE crashes.
Then I deleted that float: left;, reloaded the 3rd page, it works. Re-inserted float: left; and all pages work fine. Internet Explorer seems to have a mind besides its cache. I wonder where it might be.
What the … is wrong here?
Greetings from Einbeck, Germany,
Martin
Hi all,
Had a similar IE problem. Narrowed it down to this CSS line:
#plants ul.goesWell a {display:block; float:left;}
The odd thing is I am trying to get a page into it”s print view visual state so if I use print.css as the screen css:
media=”screen,projection”
then all is fine, but when I go to Print Preview with this css:
media=”print”
it crashes the browser consistently each time.
As I skimmed through the comments, I saw #22 from James Davies and worked a treat, thanks James! The new line is:
#plants ul.goesWell a {display:block; float:left; position:relative;}
IE: sigh!
Cheers everyone.
Mag
I had the same problem: IE6 crashes because of the float:left.
Tried janisto’s suggestion (No 32) for display: inline and it worked.
I needed the float:left because without it my div background did not appear in firefox.
div.hdr{
width:100%;
display: inline;
float:left;
background-image:url(/images/background.gif);
background-repeat: repeat-x;
}
Pingback ::
FireLike » Blog Archive » How CSS can crash Browser
[…] the day trying to fix a misterious crash problem with Internet Explorer 6. Finally I found this site with suggestions for a […]
Pingback ::
Het wil maar niet lukken « Danny’s Informatica Weblog
[…] Explore crashen. Het probleem schijnt vaker voor te komen en in de reacties op een blog post (appendix 4) zijn er wel oplossingen aan geboden maar geen van allen verholp het probleem van mijn […]
I’ve just been having a similar problem with a div floated left. Setting it to display:inline, position:relative, display:block, float:right, changing element to a span, all failed.
In the end set it to clear:left then clear:both which both solved the problem! Obviously not much help to most people but in my case it was an exceptable solution.
Currently running XP SP3 on VMware Fusion, also found the problem in IETester which also uses the IE6 render engine.
Very odd. Here was what fixed it for me (seems everyone has different solutions though…) I had a containing element that was set to:
“position:relative”
and I singled out that two elements within this container were causing the crash, and they both had “float:right” applied to them. By setting “float:none” + “display:block” to these in an IE6-specific stylesheet fixed the crash.
I’m surprised this bug is over 4 years old, and it’s such a catastrophic one at that, you would expect to have at least been aware of it before… Never have I ever seen a CSS statement cause the rendering engine to crash the browser. Until this week. I suppose in retrospect, I shouldn’t have been surprised – this is Internet Explorer we’re dealing with, after all.
Pingback ::
Hacking CSS | Do The Right Thing
[…] after I followed up the notion of improperly parsed ‘float’ properties and ended up at an old post on Eric Meyer’s site. This kicked my brain into revisiting the CSS, and after some playing around, I resolved the issue […]
Came across this bug today, yup – nearly 2011. The only issue is that mine isn’t triggered with a float, it’s being set off by a width specification. I’ve spent two days trying to figure it out, and the past two hours trying to combat it. Now I’m having to re-adjust the entire layout so that that width doesn’t need to be in there. Lovely!
Especially lovely is this tidbit about the update that did this to IE on its Security Update page:
Unreal. Thanks again, Microsoft.