markpasc.org weblog

For maybe going on a month now, I have been completely unable to use Netflix. Whenever I want to rate a movie I just watched, or add something to my queue, or whatever, I would be presented with this:

The Diagnosis

Today I was finally sick of it enough to toy with it. I turned off my web proxy. I turned off Greasemonkey (I don't have any rules for www.netflix.com anyway). I turned on referrers. I even installed Deer Park Alpha 2. I've rebooted several times since it started. I tried logging out of Netflix (by deleting all my cookies, as there's no longer a link to sign out). Nothing.

So I started debugging it. A simple, obvious problem is that the header on the signed out page is missing the header image. The style is right there in the main document for all to see (pay attention as this will be important later):

<style> #logo-area {background-color:#9A0909; background-image:url(http://cdn.nflximg.com/us/layout/...

Web Developer Toolbar showed me that the declaration is being received all right. LiveHTTPHeaders showed me that the image is never actually being requested; using javascript: to introspect the style on the logo-area div confirmed that the style is never actually set. While I was able to set background-color with JavaScript after the page loaded, no images whatsoever will load even after the page loads.

The Shaky Foundation

However I'm having trouble playing with it; all JavaScript errors are hidden due to Symantec Client Firewall inserting garbage that hides all the errors. So I turn that off and reload the page.

After spending all evening trying to debug it, I was ready to blame my problem on Netflix's amazingly, staggeringly, shockingly awful CSS.

Dear Netflix: I realize perhaps you had height on the brain writing this line, but there's no such thing as margin-height.

.formclose {height:1px; font-size:1px; line-height:1px; margin-height: -1px;}

It might be helpful if padding: none existed, but alas, it doesn't. You can, however, omit the unit if you're using 0 for a value.

.uma-lip { ... font-size:1px; padding:none; margin:none; border-right:1px ... }

I could excuse using a zindex property in addition to z-index if it were some kind of browser compatibility hack, like where you specified two cursors with a real and an IE-specific value, but Google mentions nothing about a zindex CSS property.

#bob { ... top:550px; z-index:10; zindex:10; left:200px; ... }

Please remember, just because something works one place doesn't mean it's right everywhere. For instance, you're only allowed to omit semi-colons for the last property in a declaration. That's basic syntax.

.ld-default .list .active .mpaa {padding-top:7px font-size:10px}

Oh, and make sure the thing is actually right in the one place before copying and pasting it, too.

.ld-default .list .active .year {padding-top:7px font-size:10px} .ld-default .list .active .genre {padding-top:7px font-size:10px}

Please take care and think about what you're saying. What would it mean to have font-weight: none? I believe you actually meant inherit.

.nm-footer .info {font-size:10px; font-weight: none; padding-top: 5px;}

I don't think you can use text-align: none to get deliberately jaunty text, either. Again, I believe you meant inherit.

#pageclose { ... border:none; text-align:none; padding:0px; ... }

And that you misused text-align only shows you should definitely know better than to make up properties like align.

.headertbl {width:670px; align:left}

As with margin-height, I know having multiple values for a property sound alike, but alternate fonts for a font-family property are different from specifying the padding for individual sides of a box.

.cscattitle { font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: bold; padding: 5px, 5px, 5px, 5px; }

Yeah, all these little things really are important to computers, but I understand. Perhaps you were just typing fast and missed the colon key.

<div style="height:38px; width 128px;"

Or perhaps not.

<div id="bobtitlebox" style="background-image=none; filter:progid:DXImageTransform....

The pièce de résistance is that your site passes validation through the simple expedient of showing the validator no stylesheets. There's no telling what you're sending the validator, but I have little doubt it is just as informative as what I'm seeing.

The Conclusion?

Here is where the righteously indignant payoff should come, where I would tell Netflix:

Which brings me back to my original point. If you've zoned out by now, perhaps you'll care that a paying customer hasn't been able to use your web site for a month. Sure, you have a podcasting movie reviewer, and the new friends browsing feature that often brought me to the site (until a month ago). When you have these hip things going for you to bring in a new hip audience, why did you break your site for the browser with 75,000,000 downloads and doubtless a larger than average percentage of market share intersecting yours?

but friends I've asked say Netflix still works fine in their Firefoxes. To test, I used Proxomitron to fix all Netflix's CSS, until the only errors left were about IE-only filter and cursor properties. Yup, still broken.

Additionally, being on the delivery end of a web service, I know how hard it is to care when you have only one paying customer see a completely freakish issue you haven't even heard about. So I completely sympathize with having a crazy blogging statistical outlier accuse you of incompetence. So, despite the problems and errors I mention above, I can't deny they must have it mostly working for enough of their audience.

Therefore, despite the measures I took to normalize my browsing environment during diagnosis, something must still be out of whack on my computer. Short of completely erasing Firefox and doing a completely clean reinstall, I simply didn't know what was left to do.

So I checked that images were enabled, and then checked the exceptions list.

July 31, 2005 12:30 AM 8 comments