Like many aspiring corporate drones, I created a LinkedIn account a few years ago on the advice of my university career counselor.

After the initial setup however, I had for most part avoided logging in or using it in any meaningful way until this weekend, when I decided to give it a second look. This was mostly the result of boredom and curiosity, but also a triumph of LinkedIn’s extremely persistent (i.e. annoying) email marketing efforts. After approximately 50,000 automated emails over 5 years, I finally converted.

To my surprise, I was really impressed – it had come a long way from the days when it was just an awkward version of Facebook. The interface was clean and intuitive, and the gamification features actually made it compelling to gradually improve my “profile score” by providing more personal information. I browsed the profiles of my friends, coworkers, and random strangers and admired their lovingly crafted profiles, replete with connections, endorsements, and an abundance of acronyms.

One flaw I did notice (besides the creepy “Who’s Viewed Your Profile” section) and ostensibly the topic of this post, is a minor Z-index CSS bug which I reported to the webmaster.

SCREENSHOT OF Z-INDEX BUG

Complicated stacking context causes unexpected behavior.

Complicated stacking context causes unexpected behavior.

Due to the hugely complicated HTML/CSS structure of the page in which it seems every element is positioned absolutely with a Z-Index assigned (especially in Edit Profile mode), any small oversight can have usability repercussions. 99% of the functionality works perfectly, except for this one detail. To give an idea of the complexity of the code, the incorrectly stacked ad unit in the right sidebar is actually composed of an iframe within an iframe within an iframe.

The simplest way to solve the issue that I could see was to modify a single CSS rule removing the z-index: 5; property below.

PROBLEMATIC CSS

#ad-right-top {
   height: 250px;
   position: relative;
   width: 300px;
   z-index: 5;
}

So, all in all, I learned that LinkedIn is pretty cool after all (or I’m just getting old), and that even $18B web-based companies can make simple CSS errors.

Tags: , , ,