pelago

AKA the images with negative margins problem.

Prior to our most recent update of Intervals we started to get bug reports from customers telling us that when they tried to view certain tasks, certain parts of the page would be blank. The reports ranged from the task summary being blank, up to nearly the entire page being blank. The only common thread to all these reports was that the users were using Chrome 9, which had just been released. It wasn’t appearing on any other pages, just the task view page. Here is how the page is supposed to look, as viewed in Firefox (you are looking at a development version of Intervals, so I apologize for all the weirdness):

And for contrast, here’s what the page looked like in Chrome:

As you can see, with the exception of the footer, the page was essentially blank. Using Chrome’s developer tools I dove into the DOM tree and tried to figure out what I could. For the most part, Chrome was calculating element positions correctly.

Something had to be throwing them off wildly, and that was indeed the case. A particular element was being calculated with a height of -214748328 pixels. As some of you may already know, that particular number is telling because it’s the minimum number that can be expressed in the signed 32 bit integer range. Chrome was, for all intents and purposes, calculating this element’s height as negative infinity.

A bit of further digging revealed the cause. The element in question contained an image with a height of 1 pixel and a margin (imposed by the stylesheet) of -1px -3px -2px -3px.

Essentially, the negative margin on the images threw off computation of the element’s dimensions to an unacceptable level and affecting all the surrounding elements. Removing the image solved the problem. Unfortunately, this particular block of HTML came from the customer. In fact, it came from an Outlook email client, was pulled in from their email account, and was created as a task. In this case, this particular image was used for email tracking (most of the time you don’t even notice these in the emails you read, but they’re quite common).

The solution in our case was to remove the negative margins being applied to these images from the stylesheet. It fixed the problem in this case. Incidentally, we ran into similar issues with images lacking a src attribute. We fixed that by adding the following line to our CSS file:

img:not([src]) { display: none; }

Just stumbled upon this CSS bugfix and thought I’d post my findings. I was trying to figure out why Firefox wouldn’t completely render page background-color on pages without scrollbars. For example:

Switching between different tabs would restore the background to its intended CSS value (#887D75), but nothing else seemed to work ( even tried <div class="clear"></div> at the bottom of the page ) until I tried this CSS:

body { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

Smashing Magazine, which I had heretofore never heard of, has an excellent article called 70 Expert Ideas For Better CSS Coding. The post is full of a wide range of wonderful suggestions on how to get the most out of your CSS-based designs, compiled from blog postings from other designers around the web. Every designer tends to have his or her own set of rules to go by when building a site or “chopping” a designers renderings into into XHTML/CSS. I have my own, and you can see it by just viewing the source code on this site and checking out the CSS here. However, it’s always great to see what other designers have come up with.

Some of the suggestions seem so obvious you wouldn’t think they would deserve a mention:

1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

But some suggestions seem so obvious you wonder, “Why didn’t I think of that before?!?!?!”:

Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet.”

This is such a novel idea, but such a good one.

Many suggestions rely on versions of CSS that aren’t supported in “major” browsers, and some suggestions rely on CSS hacks to get around browser inconsistencies. That being said, every CSS coder, from beginner to expert, will find something valuable here. As for me, I am making it a point from now on to improve the organization of my CSS code. Thanks Smashing Magazine!